:root {
    --bg: rgba(22,16,33,.92);
    --card: #1b1430;
    --muted: #c7c7d1;
    --text: #f8f8ff;
    --b: #3b2a60;
    --g1: #7c3aed;
    --g2: #a21caf;
    --g3: #06b6d4;
}
/* FAB */
.chat-fab-lite {
    height: 56px;
    width: 56px;
    border-radius: 999px;
    background: #0b0b0c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,.15)
}

.icon-badge-lite {
    position: relative;
    color: #fff;
    line-height: 0
}

.content-loader {
    display: none;
    padding: 12px 20px;
    /* position: absolute; */
    z-index: 1;
    right: 50px;
    bottom: 100px;
}

.typing-loader::after {
    content: "Agent is typing...";
    animation: typing 1s steps(1) infinite, blink .75s step-end infinite;
    font-size: 10px;
}

.icon-lite {
    display: block;
    color: #fff
}

.orbit-dot-lite {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #f0abfc;
    border-radius: 999px;
    transform: translate(-50%,-50%);
    animation: orbitLite 3.5s ease-in-out infinite
}

@keyframes orbitLite {
    0% {
        transform: translate(-50%,-50%) translate(0,0)
    }

    25% {
        transform: translate(-50%,-50%) translate(8px,-8px)
    }

    50% {
        transform: translate(-50%,-50%) translate(0,0)
    }

    75% {
        transform: translate(-50%,-50%) translate(-8px,8px)
    }

    100% {
        transform: translate(-50%,-50%) translate(0,0)
    }
}

.chat-fab-lite::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    animation: glow 2.2s ease-out infinite
}

@keyframes glow {
    0% {
        box-shadow: 0 0 0 0 rgba(124,58,237,0)
    }

    40% {
        box-shadow: 0 0 0 18px rgba(124,58,237,.22)
    }

    100% {
        box-shadow: 0 0 0 24px rgba(124,58,237,0)
    }
}

.unread-ping-lite {
    position: absolute;
    right: -2px;
    top: -2px;
    width: 12px;
    height: 12px;
    background: #d946ef;
    border-radius: 999px
}

    .unread-ping-lite::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: #d946ef;
        opacity: .75;
        animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite
    }

@keyframes ping {
    0% {
        transform: scale(.9);
        opacity: .9
    }

    80%, 100% {
        transform: scale(2.2);
        opacity: 0
    }
}

/* Panel */
.chat-panel-lite.ajman {
    position: absolute;
    right: 0;
    bottom: 70px;
    width: 480px;
    max-width: 92vw;
    background: var(--bg);
    border: 1px solid var(--b);
    border-radius: 26px;
    box-shadow: 0 10px 40px rgba(0,0,0,.45);
    transform: translateY(16px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition: all .25s ease;
    color: var(--text);
}

#chatbot-lite[dir="ltr"] {
    position: fixed !important;
    right: 20px !important;
    left: auto !important;
    bottom: 20px !important;
    z-index: 2147483647;
}

#chatbot-lite #chat-toggle:checked ~ .ajman {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto
}

/* Header */
.chat-header-lite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--b);
    background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(162,28,175,.18), rgba(6,182,212,.15))
}

.badge-wrap-lite {
    display: flex;
    align-items: center;
    gap: 10px
}

.bot-badge-lite {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--g1),var(--g2),var(--g3));
    color: #fff;
    animation: tilt 3.6s ease-in-out infinite;
    box-shadow: 0 6px 20px rgba(124,58,237,.35)
}

@keyframes tilt {
    0% {
        transform: rotate(-6deg)
    }

    50% {
        transform: rotate(6deg)
    }

    100% {
        transform: rotate(-6deg)
    }
}

.status-dot-lite {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 999px;
    box-shadow: 0 0 0 2px #0f0a1a
}

.title-lite {
    display: flex;
    flex-direction: column
}

.name-lite {
    font: 700 14px system-ui;
    color: #fff
}

.sub-lite {
    font: 12px system-ui;
    color: var(--muted)
}

.icon-btn-lite {
    cursor: pointer;
    font: 600 14px system-ui;
    color: #e5e5ea;
    padding: 4px 8px;
    border-radius: 10px
}

    .icon-btn-lite:hover {
        background: rgba(255,255,255,.06)
    }

/* Splash */
.splash {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 10px;
    align-items: center;
    padding: 18px 16px;
    border-bottom: 1px solid var(--b);
    background: radial-gradient(1000px 400px at 20% -20%, rgba(124,58,237,.35), transparent 60%), radial-gradient(800px 300px at 90% 10%, rgba(6,182,212,.25), transparent 60%)
}

.splash-title {
    font: 800 18px system-ui;
    color: #fff;
    letter-spacing: .2px
}

.splash-sub {
    font: 14px system-ui;
    color: #ddd;
    margin-top: 4px
}

.cta {
    margin-top: 10px;
    padding: 10px 14px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
    color: #fff;
    box-shadow: 0 10px 24px rgba(124,58,237,.35);
    cursor: pointer
}

    .cta:active {
        transform: translateY(1px)
    }

.splash-right {
    display: flex;
    align-items: center;
    justify-content: center
}

.bot-ill {
    width: 140px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 8px 30px rgba(124,58,237,.35))
}

/* Chips / Messages / Composer (hidden until start) */
.hidden {
    display: none !important
}

.chips-lite {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px
}

.chip-lite {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    padding: 6px 10px;
    border-radius: 999px;
    font: 12px system-ui;
    color: #fff;
    cursor: pointer
}

    .chip-lite:hover {
        background: rgba(255,255,255,.12)
    }

.messages-lite {
    max-height: 320px;
    overflow: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.bubble-lite {
    max-width: 80%;
    padding: 10px 12px;
    border-radius: 16px;
    font: 14px/1.45 system-ui;
    box-shadow: 0 1px 1px rgba(0,0,0,.04)
}

    .bubble-lite.user {
        margin-left: auto;
        background: #120a2b;
        color: #fff;
        border-bottom-right-radius: 4px;
        border: 1px solid rgba(255,255,255,.08)
    }

    .bubble-lite.bot {
        margin-right: auto;
        background: #22143f;
        color: #fff;
        border-bottom-left-radius: 4px;
        border: 1px solid rgba(255,255,255,.08)
    }

.composer-lite {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--b);
    background: rgba(255,255,255,.02)
}

    .composer-lite textarea {
        flex: 1;
        resize: none;
        min-height: 42px;
        max-height: 140px;
        padding: 10px 12px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 12px;
        background: #120a2b;
        color: #fff
    }

.send-lite {
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    /*   color: #fff;
             background: linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
            box-shadow: 0 6px 18px rgba(124,58,237,.35); */
    cursor: pointer;
    background: linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
    color: #fff;
    box-shadow: 0 10px 24px rgba(124,58,237,.35);
}

/* Small screens */
@media (max-width:420px) {
    .chat-panel-lite.ajman {
        width: 94vw
    }

    .splash {
        grid-template-columns: 1fr 120px
    }

    .bot-ill {
        width: 120px;
        height: 120px
    }
}

.topics {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    padding: 12px 14px
}

.topic-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(162,28,175,.22), rgba(6,182,212,.2));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 6px 16px rgba(0,0,0,.25)
}

    .topic-card:hover {
        background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(162,28,175,.28), rgba(6,182,212,.26))
    }

.t-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(255,255,255,.1);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12)
}

.t-text {
    font: 600 13px system-ui
}



/* Image Analysis */
/* صف الـcomposer */
.composer-lite {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* مكان الآيكونات */
.composer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* زر أيقونة أنيق مع أنيميشن */
.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 6px 18px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.06);
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
    animation: pop-in .45s cubic-bezier(.2,.8,.2,1) both;
    backdrop-filter: blur(6px);
}

    .icon-btn svg {
        width: 18px;
        height: 18px;
        stroke: #fff;
    }

/* أنيميشن وHover */
@keyframes pop-in {
    from {
        transform: translateY(10px) scale(.8);
        opacity: 0;
    }

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

.icon-btn:hover {
    transform: translateY(-1px);
}

.icon-btn:active {
    transform: translateY(0) scale(.97);
}

/* لو حابة تحجّمي المسافة يمين الزر Send */
#sendLite {
    margin-left: 4px;
}




/* === Composer attachments & tools (left icons) === */
.composer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    padding: 10px 12px;
    width: 100%;
}

.tools-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #5b6b73;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 10px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease;
}

    .icon-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0,0,0,.08);
    }
/* hide camera on desktop (show on touch) */
@media (hover: hover) and (pointer:fine) {
    .icon-btn.btn-camera {
        display: none;
    }
}

.attachments {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .attachments .thumb {
        position: relative;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 6px 18px rgba(0,0,0,.08);
        animation: pop .18s ease;
    }

        .attachments .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .attachments .thumb button.remove {
            position: absolute;
            top: -7px;
            right: -3px;
            width: 20px;
            height: 20px;
            border: none;
            border-radius: 50%;
            color: #fff;
            background: #1118;
            display: grid;
            place-items: center;
            cursor: pointer;
            backdrop-filter: blur(2px);
        }

#composerText {
    flex: 1;
    min-height: 42px;
    max-height: 120px;
    resize: vertical;
    border: none;
    outline: none;
    background: transparent;
    padding: 6px 4px;
    font-size: 14px;
    direction: ltr;
}

.bubble-lite img.msg-img {
    max-width: 180px;
    max-height: 180px;
    border-radius: 12px;
    display: block;
    margin-top: 6px;
}

@keyframes pop {
    from {
        transform: scale(.9);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}
/* شريط الكتابة */
.composer-lite {
    background: transparent !important;
}

.composer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
}

/* الأيقونات على الشمال */
.tools-left {
    display: flex;
    gap: 8px;
}

.icon-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.06); /* نفس ستايل البطاقات */
    border: 1px solid rgba(255,255,255,.10);
}

/* حاوية المرفقات (لو بتستخدميها) */
.attachments {
    display: flex;
    gap: 6px;
}

/* مربع الكتابة لوحده */
#composerText {
    flex: 1;
    min-height: 44px;
    max-height: 110px;
    resize: none;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    outline: none;
}

/* زر الإرسال خارج البوكس */
#sendLite {
    height: 44px;
    min-width: 56px;
    padding: 0 16px;
    border-radius: 14px;
    border: 0;
    cursor: pointer;
    /*  background: linear-gradient(135deg,#6ee7f9,#3b82f6);
            color: #0b1020; */
    font-weight: 600;
    /*   box-shadow: 0 6px 18px rgba(59,130,246,.35); */
    background: linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
    color: #fff;
    box-shadow: 0 10px 24px rgba(124,58,237,.35);
}

    #sendLite:disabled {
        opacity: .6;
        cursor: not-allowed;
    }
/* غلاف التيكست */
.input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* التيكست ايريا */
#composerText {
    width: 100%;
    min-height: 46px;
    max-height: 140px;
    resize: vertical;
    padding: 12px 12px 12px 12px; /* هيتم رفع الـtop padding ديناميكي */
    border-radius: 14px;
    outline: none;
    border: 0;
    background: rgba(255,255,255,0.08); /* لونك المفضّل */
    color: #fff;
    line-height: 1.35;
    transition: padding .2s ease;
}

/* صندوق المعاينة "داخل" التيكست */
.attachment-inside {
    position: absolute;
    top: 8px;
    left: 8px;
    display: none; /* hidden by default */
    align-items: center;
    gap: 8px;
    z-index: 1; /* فوق الخلفية وتحت الكتابة */
    pointer-events: auto; /* علشان زر X يشتغل */
}



    /* لما تظهر المعاينة */
    .attachment-inside.show {
        display: flex;
    }

    .attachment-inside .thumb {
        position: relative; /* مهم */
        width: 56px;
        height: 56px;
        border-radius: 10px;
        overflow: hidden;
    }

        .attachment-inside .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    .attachment-inside .remove {
        position: absolute; /* مهم */
        top: 0px; /* عدّلي القيم زي ما تحبي */
        right: 0px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex; /* بدل grid لو حابة */
        align-items: center;
        justify-content: center;
        background: #fff;
        color: #111;
        box-shadow: 0 2px 6px rgba(0,0,0,.25);
        z-index: 2; /* فوق الصورة */
    }

        .attachment-inside .remove:hover {
            background: rgba(255,255,255,.2);
        }

.popover {
    background-color: #000 !important;
}