/* =========================================================
   19logiX AI — 2026 Premium SaaS Chat UI
   VISUAL REDESIGN ONLY
   Existing HTML / JS / IDs / classes remain unchanged.
   ========================================================= */

:root {
    --lx-teal: #0f766e;
    --lx-deep: #073b38;
    --lx-mint: #2dd4bf;
    --lx-mint-soft: #ccfbf1;

    --lx-bg: #f8fafc;
    --lx-surface: #ffffff;
    --lx-surface-2: #f4f8f7;
    --lx-surface-3: #eef5f4;

    --lx-line: #e2e8f0;
    --lx-line-soft: rgba(15, 118, 110, .12);

    --lx-text: #102a27;
    --lx-text-2: #334155;
    --lx-muted: #7a8b88;

    --lx-green: #22c55e;

    --lx-shadow:
        0 30px 90px rgba(15, 23, 42, .16),
        0 10px 30px rgba(15, 118, 110, .07);

    --lx-shadow-soft:
        0 12px 35px rgba(15, 23, 42, .08);

    --lx-radius-window: 26px;
    --lx-radius-card: 18px;
}


/* =========================================================
   LAUNCHER
   ========================================================= */

.lx-ai-launcher {
    position: fixed !important;
    right: 22px !important;
    bottom: 88px !important;

    width: 60px;
    height: 60px;
    padding: 0;

    border: 1px solid rgba(15, 118, 110, .14);
    border-radius: 19px;

    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(45,212,191,.55), rgba(15,118,110,.08)) border-box;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, .13),
        0 6px 18px rgba(15, 118, 110, .08);

    z-index: 10004 !important;
    cursor: pointer;

    display: grid;
    place-items: center;

    color: var(--lx-teal);

    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .22s ease,
        border-color .22s ease;
}

.lx-ai-launcher:hover {
    transform: translateY(-4px) scale(1.025);

    border-color: rgba(15, 118, 110, .28);

    box-shadow:
        0 24px 55px rgba(15, 23, 42, .16),
        0 10px 28px rgba(15, 118, 110, .12);
}

.lx-ai-launcher:active {
    transform: translateY(-1px) scale(.97);
}

.lx-ai-launcher:focus-visible,
.lx-ai-menu:focus-visible,
.lx-ai-close:focus-visible,
.lx-ai-chip:focus-visible,
.lx-ai-send:focus-visible,
.lx-ai-copy:focus-visible,
.lx-ai-lead button:focus-visible,
.lx-ai-profile button:focus-visible {
    outline: 3px solid rgba(45, 212, 191, .28);
    outline-offset: 3px;
}


/* subtle premium halo */

.lx-ai-launcher-ring {
    position: absolute;
    inset: -7px;

    border: 1px solid rgba(45, 212, 191, .18);
    border-radius: 23px;

    animation: lxPulse 3.5s ease-in-out infinite;

    pointer-events: none;
}


/* actual icon container */

.lx-ai-launcher-icon {
    width: 42px;
    height: 42px;

    border-radius: 14px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(145deg, #f0fdfa, #ffffff);

    border: 1px solid rgba(15, 118, 110, .10);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 5px 15px rgba(15, 118, 110, .08);
}

.lx-ai-launcher-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}


/* online status */

.lx-ai-online-dot {
    position: absolute;

    right: 5px;
    top: 5px;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #22c55e;

    border: 2px solid #fff;

    box-shadow:
        0 0 0 2px rgba(34,197,94,.10),
        0 0 12px rgba(34,197,94,.35);
}


/* unread badge */

.lx-ai-unread {
    position: absolute;

    right: -7px;
    top: -7px;

    min-width: 19px;
    height: 19px;

    padding: 0 5px;

    border-radius: 999px;

    background: var(--lx-teal);
    color: #fff;

    border: 2px solid #fff;

    font:
        800 8px/15px system-ui,
        sans-serif;

    text-align: center;

    box-shadow: 0 5px 15px rgba(15,118,110,.22);
}

.lx-ai-launcher.has-read .lx-ai-unread {
    display: none;
}


/* launcher tooltip */

.lx-ai-launcher-label {
    position: absolute;

    right: 72px;
    top: 50%;

    transform: translateY(-50%);

    padding: 8px 11px;

    border-radius: 10px;

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

    border: 1px solid rgba(15,118,110,.12);

    color: var(--lx-deep);

    font:
        750 9px/1 system-ui,
        sans-serif;

    letter-spacing: .08em;

    box-shadow: var(--lx-shadow-soft);

    pointer-events: none;

    white-space: nowrap;
}


@keyframes lxPulse {
    0%, 100% {
        opacity: .2;
        transform: scale(.98);
    }

    50% {
        opacity: .65;
        transform: scale(1.045);
    }
}


/* =========================================================
   MAIN CHAT WINDOW
   ========================================================= */

.lx-ai-window {
    position: fixed;

    right: 22px !important;
    bottom: 158px !important;

    width: min(460px, calc(100vw - 30px));
    height: min(700px, calc(100dvh - 184px));

    min-height: 0;

    display: none;
    flex-direction: column;

    overflow: hidden;
    overscroll-behavior: contain;

    border:
        1px solid rgba(15,118,110,.13);

    border-radius: var(--lx-radius-window);

    background: var(--lx-surface);

    box-shadow: var(--lx-shadow);

    z-index: 10003 !important;

    color: var(--lx-text);

    font-family: inherit;

    isolation: isolate;
}

.lx-ai-window.open {
    display: flex;

    animation:
        lxWindowIn .28s cubic-bezier(.2,.8,.2,1);
}


@keyframes lxWindowIn {
    from {
        opacity: 0;
        transform:
            translateY(14px)
            scale(.975);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


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

.lx-ai-head {
    min-height: 78px;

    padding: 13px 14px;

    display: flex;
    align-items: center;

    gap: 11px;

    position: relative;

    background:
        linear-gradient(
            135deg,
            #062f2c 0%,
            #0b4f49 48%,
            #0f766e 100%
        );

    border-bottom:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 1px 0 rgba(255,255,255,.05);
}


/* subtle header light */

.lx-ai-head::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 120px;

    right: 20px;
    top: -80px;

    background:
        radial-gradient(
            circle,
            rgba(45,212,191,.25),
            transparent 68%
        );

    pointer-events: none;
}


/* avatar */

.lx-ai-avatar {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(239,253,250,.96)
        );

    border:
        1px solid rgba(255,255,255,.25);

    display: grid;
    place-items: center;

    padding: 5px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.lx-ai-avatar svg {
    width: 35px;
    height: 35px;
}


/* title area */

.lx-ai-head-copy {
    flex: 1;
    min-width: 0;
}

.lx-ai-title {
    font-size: 15px;
    font-weight: 850;

    color: #fff;

    letter-spacing: -.015em;
}

.lx-ai-title span {
    color: #8ff3e3;
}

.lx-ai-status {
    font-size: 9px;

    color: rgba(220,255,250,.72);

    margin-top: 5px;

    display: flex;
    align-items: center;

    gap: 6px;
}

.lx-ai-status i {
    width: 6px;
    height: 6px;

    background: #5eead4;

    border-radius: 50%;

    box-shadow:
        0 0 0 3px rgba(94,234,212,.08),
        0 0 10px rgba(94,234,212,.65);
}


/* header controls */

.lx-ai-menu,
.lx-ai-close {
    width: 34px;
    height: 34px;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius: 11px;

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

    color: rgba(255,255,255,.88);

    cursor: pointer;

    font:
        700 15px/1 inherit;

    display: grid;
    place-items: center;

    transition:
        background .18s ease,
        transform .18s ease,
        border-color .18s ease;
}

.lx-ai-menu:hover,
.lx-ai-close:hover {
    background: rgba(255,255,255,.14);

    border-color:
        rgba(255,255,255,.22);

    transform: translateY(-1px);
}


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

.lx-ai-menu-panel {
    position: absolute;

    z-index: 30;

    right: 51px;
    top: 59px;

    width: 220px;

    padding: 7px;

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

    border:
        1px solid rgba(15,118,110,.11);

    border-radius: 15px;

    box-shadow:
        0 25px 70px rgba(15,23,42,.18);

    backdrop-filter: blur(18px);
}

.lx-ai-menu-panel button {
    width: 100%;

    border: 0;

    background: transparent;

    color: #334155;

    padding: 10px 11px;

    text-align: left;

    border-radius: 9px;

    cursor: pointer;

    font:
        600 11px inherit;

    transition:
        background .15s ease,
        color .15s ease;
}

.lx-ai-menu-panel button:hover {
    background: #f0fdfa;

    color: var(--lx-teal);
}


/* =========================================================
   TRUST BAR
   ========================================================= */

.lx-ai-trust {
    padding: 9px 14px;

    border-bottom:
        1px solid var(--lx-line);

    font-size: 9px;

    color: #64748b;

    background:
        linear-gradient(
            180deg,
            #fbfefd,
            #f6faf9
        );

    line-height: 1.45;
}

.lx-ai-trust span {
    color: var(--lx-teal);

    margin-right: 5px;
}


/* =========================================================
   MESSAGE AREA
   ========================================================= */

.lx-ai-messages {
    flex: 1;

    min-height: 0;

    overflow: auto;

    padding: 19px 15px 10px;

    scroll-behavior: auto;
    overflow-anchor: none;
    overscroll-behavior-y: contain;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(45,212,191,.055),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f8fbfa 0%,
            #ffffff 45%
        );
}

.lx-ai-messages::-webkit-scrollbar {
    width: 5px;
}

.lx-ai-messages::-webkit-scrollbar-track {
    background: transparent;
}

.lx-ai-messages::-webkit-scrollbar-thumb {
    background: #cbd9d6;

    border-radius: 20px;
}

.lx-ai-messages::-webkit-scrollbar-thumb:hover {
    background: #a9bfba;
}


/* jump button */

.lx-ai-jump {
    position: absolute;

    right: 16px;
    bottom: 108px;

    z-index: 12;

    border:
        1px solid rgba(15,118,110,.13);

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

    color: var(--lx-teal);

    padding: 8px 11px;

    border-radius: 999px;

    box-shadow:
        0 12px 28px rgba(15,23,42,.11);

    font:
        800 9px inherit;

    cursor: pointer;

    backdrop-filter: blur(10px);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.lx-ai-jump:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 35px rgba(15,23,42,.14);
}

.lx-ai-jump[hidden] {
    display: none !important;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.lx-ai-msg {
    max-width: 94%;
    width: fit-content;
    min-width: 0;

    margin: 0 0 16px;

    display: flex;

    flex-direction: column;

    gap: 5px;
}

.lx-ai-msg.user {
    margin-left: auto;

    align-items: flex-end;
}


/* assistant bubble */

.lx-ai-bubble {
    padding: 13px 15px;
    line-height: 1.65;
    word-break: break-word;
    overflow-wrap: anywhere;

    border-radius:
        17px 17px 17px 6px;

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

    border:
        1px solid rgba(15,118,110,.10);

    color: #334155;

    font-size: 12.7px;

    line-height: 1.65;

    box-shadow:
        0 5px 18px rgba(15,23,42,.045);

    overflow-wrap: anywhere;
}


/* user bubble */

.lx-ai-msg.user .lx-ai-bubble {
    border-radius:
        17px 17px 6px 17px;

    background:
        linear-gradient(
            135deg,
            #168f82,
            #0f766e
        );

    border-color:
        rgba(15,118,110,.20);

    color: #fff;

    box-shadow:
        0 8px 22px rgba(15,118,110,.16);
}


.lx-ai-bubble strong {
    color: var(--lx-teal);
}

.lx-ai-bubble .lx-ai-heading {
    display: block;
    margin: 10px 0 5px;
    font-size: 13.2px;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.lx-ai-bubble .lx-ai-heading:first-child { margin-top: 0; }

.lx-ai-msg.user .lx-ai-bubble strong {
    color: #fff;
}


.lx-ai-bubble a {
    color: var(--lx-teal);

    text-decoration: underline;

    text-underline-offset: 3px;
}

.lx-ai-msg.user .lx-ai-bubble a {
    color: #d8fffa;
}


/* =========================================================
   CODE BLOCKS
   ========================================================= */

.lx-ai-bubble pre {
    position: relative;

    margin: 10px 0 0;

    padding: 11px;

    border-radius: 11px;

    background:
        #062b29;

    overflow: auto;

    color: #d8faf4;

    border:
        1px solid rgba(255,255,255,.07);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);
}

.lx-ai-code-copy {
    position: absolute;

    top: 7px;
    right: 7px;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius: 8px;

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

    color: #d8faf4;

    padding: 5px 7px;

    font:
        700 8px system-ui;

    cursor: pointer;

    transition:
        background .15s ease;
}

.lx-ai-code-copy:hover {
    background:
        rgba(255,255,255,.13);
}

.lx-ai-bubble pre code {
    display: block;

    padding: 19px 0 0;

    background: transparent;

    color: inherit;
}

.lx-ai-bubble code {
    background:
        #ecfdf5;

    color:
        #115e59;

    padding: 2px 5px;

    border-radius: 5px;

    font-size: 11px;
}


/* lists */

.lx-ai-bullet,
.lx-ai-number {
    display: block;

    margin: 4px 0;
}

.lx-ai-number b {
    color: var(--lx-teal);
}


/* =========================================================
   MESSAGE ACTIONS
   ========================================================= */

.lx-ai-bubble br { content: ''; }
.lx-ai-bubble strong { font-weight: 800; }
.lx-ai-bubble .lx-ai-bullet,
.lx-ai-bubble .lx-ai-number { display: block; margin: 4px 0; }
.lx-ai-bubble p { margin: 0 0 8px; }
.lx-ai-bubble p:last-child { margin-bottom: 0; }

.lx-ai-msg-tools {
    display: flex;

    gap: 8px;

    align-items: center;

    padding: 0 4px;
}

.lx-ai-time {
    font-size: 8.5px;

    color: #94a3b8;
}

.lx-ai-copy {
    border: 0;

    background: transparent;

    color: #94a3b8;

    padding: 0;

    cursor: pointer;

    font:
        600 8.5px inherit;

    transition: color .15s ease;
}

.lx-ai-copy:hover {
    color: var(--lx-teal);
}


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

.lx-ai-typing {
    display: flex;

    align-items: center;

    gap: 5px;

    width: max-content;

    min-width: 78px;
}

.lx-ai-typing i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #4fb7aa;

    animation:
        lxDot 1.2s infinite;
}

.lx-ai-typing i:nth-child(2) {
    animation-delay: .15s;
}

.lx-ai-typing i:nth-child(3) {
    animation-delay: .3s;
}

.lx-ai-typing span {
    font-size: 8.5px;

    color: #718e88;

    margin-left: 3px;
}

@keyframes lxDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: .3;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}


/* =========================================================
   QUICK ACTIONS
   ========================================================= */

.lx-ai-actions {
    display: flex;

    gap: 7px;

    flex-wrap: wrap;

    padding: 5px 14px 10px;

    background: #fff;
}

.lx-ai-chip {
    border:
        1px solid rgba(15,118,110,.13);

    background:
        #f8fffd;

    color:
        #115e59;

    padding: 8px 11px;

    border-radius: 10px;

    cursor: pointer;

    font:
        700 9.5px inherit;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.lx-ai-chip:hover {
    transform: translateY(-2px);

    background:
        #ecfdf8;

    border-color:
        rgba(15,118,110,.25);

    box-shadow:
        0 5px 14px rgba(15,118,110,.07);
}


/* =========================================================
   COMPOSER
   ========================================================= */

.lx-ai-compose {
    padding: 10px 11px 11px;

    border-top:
        1px solid var(--lx-line);

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

    box-shadow:
        0 -8px 25px rgba(15,23,42,.025);
}

.lx-ai-form {
    display: flex;

    gap: 8px;

    align-items: flex-end;
}


/* modern textarea */

.lx-ai-input {
    flex: 1;

    min-height: 47px;
    max-height: 130px;

    resize: none;

    border:
        1px solid #d8e2e0;

    border-radius: 15px;

    background:
        #f8fafc;

    color:
        #1e293b;

    outline: none;

    padding: 12px 13px;

    font:
        12.7px/1.45 inherit;

    box-sizing: border-box;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.lx-ai-input::placeholder {
    color: #94a3b8;
}

.lx-ai-input:hover {
    border-color:
        #c6d6d3;
}

.lx-ai-input:focus {
    border-color:
        rgba(15,118,110,.45);

    background:
        #fff;

    box-shadow:
        0 0 0 4px rgba(45,212,191,.08);
}


/* =========================================================
   SEND BUTTON
   ========================================================= */

.lx-ai-send {
    flex: 0 0 47px;

    width: 47px;
    height: 47px;

    border: 0;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #2dd4bf,
            #0f766e
        );

    color: #fff;

    cursor: pointer;

    font-size: 18px;

    font-weight: 900;

    box-shadow:
        0 10px 25px rgba(15,118,110,.20);

    display: grid;
    place-items: center;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.lx-ai-send:hover:not(:disabled) {
    transform:
        translateY(-2px)
        scale(1.02);

    filter:
        saturate(1.08);

    box-shadow:
        0 14px 32px rgba(15,118,110,.25);
}

.lx-ai-send:active:not(:disabled) {
    transform:
        translateY(0)
        scale(.97);
}

.lx-ai-send:disabled {
    opacity: .45;

    cursor: not-allowed;

    box-shadow: none;
}


/* composer metadata */

.lx-ai-compose-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin: 7px 3px 0;

    color: #94a3b8;

    font-size: 8px;

    line-height: 1.35;
}


/* =========================================================
   LEAD / PROFILE CARDS
   ========================================================= */

.lx-ai-lead,
.lx-ai-profile {
    margin: 3px 0 14px;

    padding: 14px;

    border:
        1px solid rgba(15,118,110,.11);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f6fbfa
        );

    box-shadow:
        0 8px 25px rgba(15,23,42,.045);
}

.lx-ai-lead-head {
    display: flex;

    gap: 9px;

    align-items: flex-start;

    margin-bottom: 11px;
}

.lx-ai-lead-icon {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background:
        #ecfdf8;

    color:
        var(--lx-teal);

    border:
        1px solid rgba(45,212,191,.13);
}

.lx-ai-lead strong {
    font-size: 11.5px;
}

.lx-ai-lead small,
.lx-ai-profile-title span {
    display: block;

    color: #64748b;

    font-size: 9px;

    margin-top: 3px;
}

.lx-ai-lead-grid,
.lx-ai-profile-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;
}

.lx-ai-lead input,
.lx-ai-lead textarea,
.lx-ai-profile input {
    width: 100%;

    box-sizing: border-box;

    border:
        1px solid #d8e2e0;

    background:
        #fff;

    color:
        #1e293b;

    border-radius: 10px;

    padding: 10px;

    font:
        11px inherit;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.lx-ai-lead input:focus,
.lx-ai-lead textarea:focus,
.lx-ai-profile input:focus {
    border-color:
        rgba(15,118,110,.42);

    box-shadow:
        0 0 0 3px rgba(45,212,191,.07);
}

.lx-ai-lead textarea {
    grid-column: 1/-1;

    min-height: 78px;

    resize: vertical;
}


/* consent */

.lx-ai-consent {
    display: flex;

    gap: 7px;

    align-items: flex-start;

    margin: 10px 0;

    font-size: 9px;

    line-height: 1.45;

    color: #64748b;
}

.lx-ai-consent input {
    width: auto !important;

    margin-top: 2px;
}

.lx-ai-consent strong {
    color: #115e59;
}


/* card buttons */

.lx-ai-lead button,
.lx-ai-profile button {
    width: 100%;

    border: 0;

    border-radius: 11px;

    padding: 11px;

    background:
        linear-gradient(
            145deg,
            #2dd4bf,
            #0f766e
        );

    color: #fff;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(15,118,110,.14);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.lx-ai-lead button:hover,
.lx-ai-profile button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 12px 26px rgba(15,118,110,.19);
}


/* =========================================================
   SUCCESS STATE
   ========================================================= */

.lx-ai-success {
    display: flex;

    gap: 9px;

    align-items: flex-start;
}

.lx-ai-success > span {
    width: 25px;
    height: 25px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background:
        #ecfdf5;

    color:
        #0f766e;

    font-weight: 900;

    border:
        1px solid rgba(15,118,110,.08);
}

.lx-ai-success strong {
    font-size: 11.5px;
}

.lx-ai-success small {
    display: block;

    color: #64748b;

    font-size: 9px;

    margin-top: 3px;

    line-height: 1.45;
}


/* =========================================================
   FLOATING CONTROL RAIL
   WhatsApp → AI → Back to top
   ========================================================= */

.floating-wa {
    right: 22px !important;
    bottom: 22px !important;

    z-index: 10002 !important;
}

.lx-ai-launcher {
    z-index: 10004 !important;
}

.back-to-top {
    right: 22px !important;
    bottom: 154px !important;

    z-index: 10001 !important;
}

.lx-chat-open .back-to-top {
    opacity: 0 !important;

    pointer-events: none !important;

    transform:
        translateY(8px);
}


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

@media(max-width:560px) {

    .lx-ai-launcher {
        right: 13px !important;
        bottom: 70px !important;

        width: 53px;
        height: 53px;

        border-radius: 16px;
    }

    .lx-ai-launcher-ring {
        inset: -6px;
        border-radius: 20px;
    }

    .lx-ai-launcher-icon {
        width: 38px;
        height: 38px;

        border-radius: 12px;
    }

    .lx-ai-launcher-icon svg {
        width: 29px;
        height: 29px;
    }

    .lx-ai-launcher-label {
        display: none;
    }

    .lx-ai-unread {
        right: -3px;
        top: -5px;
    }

    .lx-ai-window {
        right: 7px !important;
        bottom: 128px !important;

        width: calc(100vw - 14px) !important;
        height: calc(100dvh - 142px) !important;

        min-height: 0;

        border-radius: 22px;

        padding-bottom:
            env(safe-area-inset-bottom);
    }

    .lx-ai-head {
        min-height: 68px;

        padding:
            11px 11px;
    }

    .lx-ai-avatar {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        border-radius: 13px;
    }

    .lx-ai-avatar svg {
        width: 32px;
        height: 32px;
    }

    .lx-ai-messages {
        padding:
            14px 10px 8px;
    }

    .lx-ai-bubble {
        font-size: 12.2px;

        padding:
            11px 12px;
    }

    .lx-ai-jump {
        right: 12px;
        bottom: 99px;

        font-size: 8.5px;
    }

    .lx-ai-actions {
        padding-left: 10px;
        padding-right: 10px;

        gap: 6px;
    }

    .lx-ai-chip {
        padding:
            7px 9px;
    }

    .lx-ai-lead-grid,
    .lx-ai-profile-grid {
        grid-template-columns: 1fr;
    }

    .lx-ai-lead textarea {
        grid-column: auto;
    }

    .floating-wa {
        right: 12px !important;

        bottom:
            calc(10px + env(safe-area-inset-bottom)) !important;

        width: 48px !important;
        height: 48px !important;
    }

    .back-to-top {
        right: 12px !important;

        bottom:
            calc(124px + env(safe-area-inset-bottom)) !important;

        width: 36px !important;
        height: 36px !important;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .lx-ai-window,
    .lx-ai-launcher,
    .lx-ai-chip,
    .lx-ai-launcher-ring,
    .lx-ai-send,
    .lx-ai-lead button,
    .lx-ai-profile button {
        animation: none !important;

        transition: none !important;
    }
}