/*==================================================
    DDS INTERIORS CHATBOT
    PREMIUM CINEMATIC AI ASSISTANT
    GOLD • BLACK • GLASS • ANIMATED
==================================================*/


/*==================================================
    ROOT
==================================================*/

:root{

    --dds-gold:#d4af37;
    --dds-gold-light:#f5d76e;
    --dds-gold-dark:#9f7f18;

    --dds-black:#050505;
    --dds-dark:#090a0e;
    --dds-card:#11141a;
    --dds-card-light:#1a1e26;

    --dds-white:#ffffff;
    --dds-muted:#9b9b9b;

}


/*==================================================
    RESET
==================================================*/

.dds-chatbot-wrapper,
.dds-chatbot-wrapper *{

    box-sizing:border-box;

}


/*==================================================
    WRAPPER
==================================================*/

.dds-chatbot-wrapper{

    position:relative;

    z-index:99999;

}


/*==================================================
    FLOATING CHATBOT BUTTON
==================================================*/

.dds-bot-launcher{

    position:fixed;

    right:30px;

    /*
        WhatsApp button-க்கு மேலே
    */

    bottom:110px;

    width:76px;

    height:76px;

    padding:0;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:

        radial-gradient(

            circle at 30% 20%,

            var(--dds-gold-light),

            var(--dds-gold) 55%,

            var(--dds-gold-dark)

        );

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:100000;

    box-shadow:

        0 15px 40px
        rgba(0,0,0,.7),

        0 0 30px
        rgba(212,175,55,.45);

    transition:

        transform .45s cubic-bezier(.2,.8,.2,1),

        opacity .35s ease,

        visibility .35s ease;

    animation:

        ddsBotFloat
        3s
        ease-in-out
        infinite;

}


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

.dds-bot-launcher:hover{

    transform:

        scale(1.13)
        rotate(5deg);

    box-shadow:

        0 20px 50px
        rgba(0,0,0,.8),

        0 0 45px
        rgba(245,215,110,.7);

}


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

.dds-bot-launcher.hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:

        scale(.35)
        rotate(-180deg);

}


/*==================================================
    BOT FACE
==================================================*/

.dds-bot-face{

    position:relative;

    width:50px;

    height:55px;

}


/*==================================================
    ANTENNA
==================================================*/

.dds-bot-antenna{

    position:absolute;

    top:-12px;

    left:50%;

    width:4px;

    height:13px;

    background:#111;

    transform:translateX(-50%);

}


.dds-bot-antenna::before{

    content:"";

    position:absolute;

    top:-7px;

    left:50%;

    width:9px;

    height:9px;

    border-radius:50%;

    background:#111;

    transform:translateX(-50%);

    box-shadow:

        0 0 8px
        rgba(0,0,0,.7);

}


/*==================================================
    BOT HEAD
==================================================*/

.dds-bot-head{

    position:absolute;

    left:50%;

    bottom:0;

    width:48px;

    height:40px;

    transform:translateX(-50%);

    border-radius:

        14px
        14px
        18px
        18px;

    background:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}


/*==================================================
    EYES
==================================================*/

.dds-eye{

    width:8px;

    height:8px;

    border-radius:50%;

    background:

        var(--dds-gold-light);

    box-shadow:

        0 0 10px
        var(--dds-gold-light);

    animation:

        ddsEyeBlink
        4s
        infinite;

}


/*==================================================
    MOUTH
==================================================*/

.dds-bot-mouth{

    position:absolute;

    bottom:7px;

    left:50%;

    width:16px;

    height:5px;

    border-bottom:

        2px solid
        var(--dds-gold-light);

    border-radius:50%;

    transform:translateX(-50%);

}


/*==================================================
    PULSE
==================================================*/

.dds-bot-pulse{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:

        2px solid
        rgba(245,215,110,.8);

    pointer-events:none;

    animation:

        ddsBotPulse
        2s
        ease-out
        infinite;

}


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

.dds-chat-window{

    position:fixed;

    right:30px;

    /*
        Launcher-க்கு மேலே
    */

    bottom:200px;

    width:390px;

    max-width:

        calc(100vw - 30px);

    height:620px;

    max-height:

        calc(100vh - 220px);

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:26px;

    background:

        linear-gradient(

            145deg,

            rgba(20,23,29,.98),

            rgba(5,6,9,.99)

        );

    border:

        1px solid
        rgba(212,175,55,.28);

    box-shadow:

        0 30px 90px
        rgba(0,0,0,.8),

        0 0 50px
        rgba(212,175,55,.15);

    z-index:99999;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:

        translateY(40px)
        scale(.85)
        rotateX(8deg);

    transform-origin:

        bottom
        right;

    transition:

        opacity .45s ease,

        visibility .45s ease,

        transform .55s cubic-bezier(.16,1,.3,1);

}


/*==================================================
    ACTIVE CHAT
==================================================*/

.dds-chat-window.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:

        translateY(0)
        scale(1)
        rotateX(0);

}


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

.dds-chat-header{

    position:relative;

    min-height:78px;

    padding:15px 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:

        linear-gradient(

            135deg,

            var(--dds-gold-dark),

            var(--dds-gold),

            var(--dds-gold-light)

        );

    color:#111;

    overflow:hidden;

}


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

.dds-chat-header::after{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transform:skewX(-20deg);

    animation:

        ddsHeaderShine
        5s
        ease-in-out
        infinite;

}


/*==================================================
    PROFILE
==================================================*/

.dds-bot-profile{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:12px;

}


/*==================================================
    MINI BOT
==================================================*/

.dds-mini-bot{

    position:relative;

    width:43px;

    height:43px;

    border-radius:13px;

    background:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    box-shadow:

        0 5px 15px
        rgba(0,0,0,.3);

}


.dds-mini-bot span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:

        var(--dds-gold-light);

    box-shadow:

        0 0 8px
        var(--dds-gold-light);

    animation:

        ddsMiniBlink
        3s
        infinite;

}


/*==================================================
    TITLE
==================================================*/

.dds-bot-profile h3{

    margin:0;

    font-size:16px;

    font-weight:700;

}


.dds-bot-profile small{

    display:block;

    margin-top:4px;

    font-size:11px;

    color:#333;

}


/*==================================================
    ONLINE DOT
==================================================*/

.dds-online-dot{

    display:inline-block;

    width:7px;

    height:7px;

    margin-right:4px;

    border-radius:50%;

    background:#168f35;

    box-shadow:

        0 0 8px
        #168f35;

    animation:

        ddsOnlinePulse
        1.8s
        infinite;

}


/*==================================================
    CLOSE BUTTON
==================================================*/

.dds-chat-close{

    position:relative;

    z-index:3;

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    background:

        rgba(0,0,0,.14);

    color:#111;

    font-size:27px;

    line-height:1;

    cursor:pointer;

    transition:

        transform .4s ease,

        background .4s ease,

        color .4s ease;

}


.dds-chat-close:hover{

    transform:

        rotate(90deg)
        scale(1.1);

    background:#111;

    color:var(--dds-gold-light);

}


/*==================================================
    CHAT BODY
==================================================*/

.dds-chat-body{

    flex:1;

    padding:20px;

    overflow-y:auto;

    scroll-behavior:smooth;

    background:

        radial-gradient(

            circle at 10% 10%,

            rgba(212,175,55,.04),

            transparent 35%

        );

}


/*==================================================
    SCROLLBAR
==================================================*/

.dds-chat-body::-webkit-scrollbar{

    width:5px;

}


.dds-chat-body::-webkit-scrollbar-track{

    background:transparent;

}


.dds-chat-body::-webkit-scrollbar-thumb{

    background:

        linear-gradient(

            var(--dds-gold),

            var(--dds-gold-dark)

        );

    border-radius:20px;

}


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

.dds-message{

    display:flex;

    gap:10px;

    margin-bottom:17px;

    animation:

        ddsMessageIn
        .55s
        cubic-bezier(.16,1,.3,1)
        both;

}


/*==================================================
    BOT ICON
==================================================*/

.dds-message-bot-icon{

    flex-shrink:0;

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--dds-gold),

            var(--dds-gold-light)

        );

    font-size:19px;

    box-shadow:

        0 5px 15px
        rgba(212,175,55,.25);

}


/*==================================================
    MESSAGE CONTENT
==================================================*/

.dds-message-content{

    max-width:82%;

    padding:13px 15px;

    border-radius:

        5px
        18px
        18px
        18px;

    background:

        linear-gradient(

            135deg,

            #181b22,

            #242934

        );

    color:white;

    border:

        1px solid
        rgba(212,175,55,.12);

    box-shadow:

        0 8px 20px
        rgba(0,0,0,.18);

}


.dds-message-content p{

    margin:0 0 6px;

    font-size:14px;

    line-height:1.6;

}


.dds-message-content p:last-child{

    margin-bottom:0;

}


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

#ddsDynamicMessages{

    display:flex;

    flex-direction:column;

    gap:2px;

}


/*==================================================
    USER MESSAGE
==================================================*/

.dds-user-message{

    display:flex;

    justify-content:flex-end;

    margin:8px 0 16px;

    animation:

        ddsUserMessageIn
        .45s
        cubic-bezier(.16,1,.3,1)
        both;

}


.dds-user-message .dds-message-content{

    max-width:82%;

    border-radius:

        18px
        5px
        18px
        18px;

    background:

        linear-gradient(

            135deg,

            var(--dds-gold),

            var(--dds-gold-light)

        );

    color:#111;

    border:none;

    box-shadow:

        0 8px 20px
        rgba(212,175,55,.18);

}


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

.dds-typing{

    display:none;

    align-items:center;

    gap:5px;

    width:max-content;

    padding:12px 15px;

    margin:

        5px
        0
        14px
        46px;

    border-radius:

        5px
        16px
        16px
        16px;

    background:#181b22;

}


.dds-typing.active{

    display:flex;

    animation:

        ddsMessageIn
        .35s
        ease
        both;

}


.dds-typing span{

    width:6px;

    height:6px;

    border-radius:50%;

    background:

        var(--dds-gold);

    animation:

        ddsTypingDot
        1.2s
        infinite;

}


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

    animation-delay:.15s;

}


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

    animation-delay:.3s;

}


/*==================================================
    CHAT FORM
==================================================*/

.dds-chat-form{

    display:flex;

    align-items:center;

    gap:10px;

    padding:13px;

    background:

        linear-gradient(

            180deg,

            #11141a,

            #0b0d11

        );

    border-top:

        1px solid
        rgba(255,255,255,.06);

}


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

.dds-input-area{

    position:relative;

    flex:1;

}


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

.dds-input-area::before{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:16px;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(212,175,55,.5),

            transparent

        );

    opacity:0;

    filter:blur(5px);

    transition:

        opacity .35s ease;

    pointer-events:none;

}


.dds-input-area:focus-within::before{

    opacity:1;

}


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

#ddsChatInput{

    position:relative;

    z-index:1;

    width:100%;

    height:48px;

    box-sizing:border-box;

    padding:

        0
        16px;

    border:

        1px solid
        rgba(255,255,255,.12);

    border-radius:15px;

    outline:none;

    background:

        linear-gradient(

            135deg,

            #191c23,

            #101217

        );

    color:white;

    font-family:inherit;

    font-size:14px;

    transition:

        border-color .35s ease,

        box-shadow .35s ease,

        transform .35s ease,

        background .35s ease;

}


#ddsChatInput::placeholder{

    color:#777;

    transition:

        opacity .3s ease,

        transform .3s ease;

}


#ddsChatInput:focus{

    border-color:

        rgba(212,175,55,.8);

    background:

        linear-gradient(

            135deg,

            #20242c,

            #12151b

        );

    box-shadow:

        0 0 0 3px
        rgba(212,175,55,.1),

        0 0 25px
        rgba(212,175,55,.08);

    transform:

        translateY(-1px);

}


#ddsChatInput:focus::placeholder{

    opacity:.35;

    transform:

        translateX(5px);

}


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

.dds-send-button{

    position:relative;

    flex-shrink:0;

    width:52px;

    height:48px;

    border:none;

    border-radius:15px;

    cursor:pointer;

    background:

        linear-gradient(

            135deg,

            var(--dds-gold-dark),

            var(--dds-gold),

            var(--dds-gold-light)

        );

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    box-shadow:

        0 8px 20px
        rgba(212,175,55,.2);

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}


.dds-send-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transform:skewX(-20deg);

    transition:left .5s ease;

}


.dds-send-button:hover::before{

    left:130%;

}


.dds-send-button:hover{

    transform:

        translateY(-3px)
        scale(1.04);

    box-shadow:

        0 12px 30px
        rgba(212,175,55,.35);

}


.dds-send-button:active{

    transform:

        scale(.92);

}


.dds-send-icon{

    position:relative;

    z-index:2;

    font-size:19px;

    transition:

        transform .3s ease;

}


.dds-send-button:hover .dds-send-icon{

    transform:

        translateX(3px)
        rotate(-8deg);

}


/*==================================================
    LOADING
==================================================*/

.dds-send-button.loading{

    pointer-events:none;

    animation:

        ddsSendPulse
        1s
        infinite;

}


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

.dds-chat-input-error{

    animation:

        ddsInputShake
        .45s
        ease;

    border-color:

        #d9534f !important;

}


/*==================================================
    ANIMATIONS
==================================================*/

@keyframes ddsBotFloat{

    0%,
    100%{

        transform:

            translateY(0);

    }

    50%{

        transform:

            translateY(-8px);

    }

}


@keyframes ddsBotPulse{

    0%{

        transform:

            scale(1);

        opacity:.8;

    }

    100%{

        transform:

            scale(1.7);

        opacity:0;

    }

}


@keyframes ddsEyeBlink{

    0%,
    45%,
    50%,
    100%{

        transform:

            scaleY(1);

    }

    47%{

        transform:

            scaleY(.1);

    }

}


@keyframes ddsMiniBlink{

    0%,
    45%,
    50%,
    100%{

        transform:

            scaleY(1);

    }

    47%{

        transform:

            scaleY(.2);

    }

}


@keyframes ddsOnlinePulse{

    0%,
    100%{

        opacity:1;

        transform:

            scale(1);

    }

    50%{

        opacity:.45;

        transform:

            scale(.75);

    }

}


@keyframes ddsHeaderShine{

    0%{

        left:-100%;

    }

    35%,
    100%{

        left:140%;

    }

}


@keyframes ddsMessageIn{

    from{

        opacity:0;

        transform:

            translateY(18px)
            translateX(-8px)
            scale(.92);

    }

    to{

        opacity:1;

        transform:

            translateY(0)
            translateX(0)
            scale(1);

    }

}


@keyframes ddsUserMessageIn{

    from{

        opacity:0;

        transform:

            translateX(25px)
            scale(.9);

    }

    to{

        opacity:1;

        transform:

            translateX(0)
            scale(1);

    }

}


@keyframes ddsTypingDot{

    0%,
    60%,
    100%{

        transform:

            translateY(0);

        opacity:.45;

    }

    30%{

        transform:

            translateY(-6px);

        opacity:1;

    }

}


@keyframes ddsSendPulse{

    0%,
    100%{

        transform:

            scale(1);

    }

    50%{

        transform:

            scale(1.05);

    }

}


@keyframes ddsInputShake{

    0%,
    100%{

        transform:

            translateX(0);

    }

    25%{

        transform:

            translateX(-6px);

    }

    75%{

        transform:

            translateX(6px);

    }

}


/*==================================================
    TABLET
==================================================*/

@media(max-width:900px){

    .dds-bot-launcher{

        right:24px;

        bottom:100px;

    }


    .dds-chat-window{

        right:24px;

        bottom:190px;

    }

}


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

@media(max-width:600px){

    .dds-bot-launcher{

        right:20px;

        bottom:95px;

        width:68px;

        height:68px;

    }


    .dds-chat-window{

        right:10px;

        bottom:175px;

        width:

            calc(100vw - 20px);

        max-width:none;

        height:

            calc(100vh - 195px);

        max-height:none;

        border-radius:22px;

    }


    .dds-chat-body{

        padding:16px;

    }


    .dds-chat-form{

        padding:10px;

    }


    #ddsChatInput{

        height:46px;

        font-size:13px;

    }


    .dds-send-button{

        width:48px;

        height:46px;

    }


    .dds-message-content{

        max-width:88%;

    }

}


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

@media(max-width:400px){

    .dds-bot-launcher{

        right:16px;

        bottom:90px;

        width:64px;

        height:64px;

    }


    .dds-chat-window{

        right:5px;

        bottom:165px;

        width:

            calc(100vw - 10px);

    }


    .dds-chat-header{

        min-height:70px;

    }


    .dds-bot-profile h3{

        font-size:14px;

    }


    .dds-message-content{

        max-width:90%;

    }

}