/* ==========================================================
   PREMIUM AI CHATBOT UI
   PART 1/5
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


:root{

    /* Main Colors - Soft Pastel Orange */
    --primary:#F4A261;
    --primary-dark:#E76F51;
    --primary-light:#FFF1E6;

    --secondary:#F6BD60;


    /* Background */
    --background:
    radial-gradient(
        circle at top left,
        #FFE8D6 0%,
        #FFF7F0 45%,
        #FFFFFF 100%
    );


    /* Cards */
    --white:#ffffff;


    /* Text */
    --text:#3D342F;
    --text-light:#8C7B70;


    /* Messages */
    --bot-message:#FFF3E8;

    --user-message:
    linear-gradient(
        135deg,
        #F4A261,
        #E76F51
    );


    /* Borders */
    --border:#F3D2B8;


    /* Shadows */
    --shadow:
    0 25px 70px rgba(231,111,81,.18);


    --soft-shadow:
    0 10px 30px rgba(244,162,97,.25);

}



/* ==========================================================
   GLOBAL CHATBOT ONLY
========================================================== */


.chatbot-popup *,
#chatbot-toggler,
.chatbot-popup{

    box-sizing:border-box;

    font-family:"Inter", sans-serif;

}


/* FIX MATERIAL SYMBOL ICONS */
.material-symbols-rounded,
.material-symbols-outlined{

    font-family:'Material Symbols Rounded' !important;

    font-weight:normal;

    font-style:normal;

    font-size:24px;

    line-height:1;

    letter-spacing:normal;

    text-transform:none;

    display:inline-block;

    white-space:nowrap;

    word-wrap:normal;

    direction:ltr;

    -webkit-font-feature-settings:'liga';

    -webkit-font-smoothing:antialiased;

}

html,
body{

    width:100%;

    /* height:100%;

    overflow:hidden; */

}



body{

    min-height:100vh;
/* 
    background:
    var(--background);

    overflow:hidden; */

}



/* ==========================================================
   CHAT TOGGLE BUTTON
========================================================== */


#chatbot-toggler{


    position:fixed;

    right:35px;
    bottom:35px;


    width:68px;
    height:68px;


    border:none;

    border-radius:50%;


    display:flex;

    align-items:center;

    justify-content:center;



    cursor:pointer;


    color:white;



    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );



    box-shadow:
    0 20px 40px
    rgba(99,102,241,.35);



    transition:
    .35s ease;



    z-index:999;



}



#chatbot-toggler:hover{


    transform:
    translateY(-5px)
    scale(1.08);


    box-shadow:
    0 30px 55px
    rgba(99,102,241,.45);


}



#chatbot-toggler span{

    position:absolute;

    font-size:30px;

    transition:.3s;

    font-family:'Material Symbols Rounded' !important;

}



#chatbot-toggler span:last-child{

    opacity:0;

}



body.show-chatbot #chatbot-toggler{


    transform:
    rotate(90deg);


}



body.show-chatbot #chatbot-toggler span:first-child{


    opacity:0;


}



body.show-chatbot #chatbot-toggler span:last-child{


    opacity:1;


}
/* ==========================================================
   CHAT WINDOW
   PART 2/5
========================================================== */


.chatbot-popup{


    position:fixed;


    right:35px;
    bottom:120px;



    width:430px;
    height:720px;



    display:flex;

    flex-direction:column;



    background:

    rgba(255,255,255,.82);



    backdrop-filter:

    blur(25px);



    -webkit-backdrop-filter:

    blur(25px);



    border:

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



    border-radius:32px;



    overflow:hidden;



    box-shadow:

    var(--shadow);



    opacity:0;

    pointer-events:none;



    transform:

    translateY(50px)
    scale(.92);



    transition:

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



}




body.show-chatbot .chatbot-popup{


    opacity:1;


    pointer-events:auto;


    transform:

    translateY(0)
    scale(1);



}




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


.chat-header{


    padding:

    22px 24px;



    display:flex;


    justify-content:space-between;


    align-items:center;




    color:white;



    background:
    
    
    linear-gradient(
        
    135deg,
    #F4A261,
    #E76F51
    
    );



    position:relative;


    overflow:hidden;



}




.chat-header::before{


    content:"";


    position:absolute;


    width:220px;

    height:220px;


    background:

    rgba(255,255,255,.15);



    border-radius:50%;


    right:-80px;


    top:-100px;


}





.chat-header::after{


    content:"";


    position:absolute;


    width:150px;


    height:150px;


    background:

    rgba(255,255,255,.08);



    border-radius:50%;



    left:-50px;


    bottom:-80px;



}





.header-info{


    display:flex;


    align-items:center;


    gap:15px;



    position:relative;


    z-index:2;


}




.chatbot-logo{


    width:46px;


    height:46px;



    padding:9px;



    background:white;



    border-radius:50%;



    fill:

    var(--primary);



    box-shadow:

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



}




.logo-text{


    font-size:22px;


    font-weight:700;


    letter-spacing:-.5px;


}




#close-chatbot{


    position:relative;


    z-index:3;

    font-family:'Material Symbols Rounded' !important;

    width:42px;


    height:42px;



    border:none;


    border-radius:50%;



    display:flex;


    align-items:center;


    justify-content:center;



    color:white;



    background:

    rgba(255,255,255,.18);



    cursor:pointer;



    transition:.25s;



}




#close-chatbot:hover{


    background:

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



    transform:

    rotate(90deg);



}
/* ==========================================================
   CHAT BODY
   PART 3/5
========================================================== */


.chat-body{


    flex:1;


    padding:25px;



    overflow-y:auto;



    display:flex;


    flex-direction:column;



    gap:18px;



    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.55),

        rgba(248,250,252,.8)

    );



}




/* Scrollbar */


.chat-body::-webkit-scrollbar{


    width:7px;


}



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


    background:

    linear-gradient(

    #FFD6B8,

    #F4A261

);


    border-radius:20px;


}




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


.message{


    display:flex;


    gap:12px;



    animation:

    messageShow .35s ease;



}



@keyframes messageShow{


    from{


        opacity:0;


        transform:

        translateY(15px);



    }


    to{


        opacity:1;


        transform:

        translateY(0);



    }


}




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


.bot-avatar{


    width:40px;


    height:40px;



    flex-shrink:0;



    padding:8px;



    border-radius:50%;



    background:
    
    linear-gradient(

    135deg,

    #F6BD60,

    #F4A261

);



    fill:white;



    box-shadow:


    0 8px 20px

    rgba(99,102,241,.3);



}




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


.message-text{


    max-width:78%;



    padding:

    14px 18px;



    font-size:15px;



    line-height:1.65;



    border-radius:22px;



    color:

    var(--text);



}




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


.bot-message .message-text{


    background:

    var(--bot-message);



    border-bottom-left-radius:

    6px;



    box-shadow:


    0 5px 15px

    rgba(0,0,0,.04);



}





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


.user-message{


    justify-content:flex-end;


}





.user-message .message-text{


    background:

    var(--user-message);



    color:white;



    border-bottom-right-radius:

    6px;



    box-shadow:


    0 12px 25px

    rgba(99,102,241,.3);



}




/* ==========================================================
   THINKING ANIMATION
========================================================== */


.thinking-indicator{


    display:flex;


    gap:6px;



    padding:12px 5px;



}



.dot{


    width:9px;


    height:9px;



    border-radius:50%;



    background:

    var(--primary);



    animation:

    typing 1.4s infinite;



}



.dot:nth-child(2){


    animation-delay:.2s;


}



.dot:nth-child(3){


    animation-delay:.4s;


}



@keyframes typing{


    0%,
    80%,
    100%{


        opacity:.3;


        transform:

        translateY(0);



    }



    40%{


        opacity:1;


        transform:

        translateY(-8px);



    }


}
/* ==========================================================
   FOOTER
   PART 4/5
========================================================== */


.chat-footer{


    padding:18px 20px;



    background:

    rgba(255,255,255,.75);



    backdrop-filter:

    blur(20px);



    border-top:

    1px solid var(--border);



}




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


.chat-form{


    display:flex;


    align-items:flex-end;



    gap:10px;



    padding:

    2px 10px;



    background:white;



    border:

    1px solid #e5e7eb;



    border-radius:26px;



    transition:.3s;



    box-shadow:


    0 8px 25px

    rgba(15,23,42,.06);



}




.chat-form:focus-within{


    border-color:

    var(--primary);



    box-shadow:


    0 0 0 5px

    rgba(244,162,97,.18);



}




.message-input{


    flex:1;



    border:none;



    outline:none;



    resize:none;



    background:transparent;



    color:

    var(--text);



    font-size:15px;



    max-height:130px;



    padding:

    8px 4px;



}




.message-input::placeholder{


    color:

    #9ca3af;


}




/* ==========================================================
   CONTROL BUTTONS
========================================================== */


.chat-controls{


    display:flex;


    align-items:center;


    gap:6px;



}




.chat-controls button{


    width:42px;


    height:42px;



    border:none;



    border-radius:50%;



    display:flex;


    justify-content:center;


    align-items:center;



    cursor:pointer;



    color:

    #E76F51;



    background:

    transparent;



    transition:.25s;



}




.chat-controls button:hover{


    background:

    #eef2ff;



    transform:

    translateY(-2px);



}




/* SEND BUTTON */


#send-message{


    display:none;

    width:30px;
    height:30px; 



    color:white;



    background:
    
    linear-gradient(

    135deg,

    #F4A261,

    #E76F51

);



    box-shadow:


    0 10px 20px

    rgba(99,102,241,.3);



}




.message-input:valid

~.chat-controls

#send-message{


    display:flex;


}





#send-message:hover{


    transform:

    scale(1.1);



}



/* ==========================================================
   FILE UPLOAD
========================================================== */


.file-upload-wrapper{


    width:42px;


    height:42px;



    position:relative;



}




.file-upload-wrapper img{


    width:42px;


    height:42px;



    object-fit:cover;



    border-radius:50%;



    display:none;



}




.file-upload-wrapper.file-uploaded img{


    display:block;



}




.file-upload-wrapper.file-uploaded #file-upload{


    display:none;



}




#file-cancel{


    display:none;



    position:absolute;



    inset:0;



    background:white;



    color:#ef4444;



}




.file-upload-wrapper.file-uploaded:hover #file-cancel{


    display:flex;



}




/* ==========================================================
   EMOJI PICKER
========================================================== */


em-emoji-picker{


    position:absolute;



    bottom:95px;


    left:50%;



    transform:

    translateX(-50%);



    max-width:360px;



    visibility:hidden;



    box-shadow:

    0 20px 50px rgba(0,0,0,.15);



}




body.show-emoji-picker em-emoji-picker{


    visibility:visible;



}
/* ==========================================================
   RESPONSIVE FIXED SCREEN VERSION
========================================================== */


/* Desktop Default */

.chatbot-popup{

    position:fixed;

    right:30px;
    bottom:80px;

    width:400px;      /* smaller width */

    height:560px;     /* smaller height */

    max-height:620px;

    display:flex;

    flex-direction:column;

}



/* Keep body inside window */

.chat-body{

    flex:1;

    min-height:0;

    overflow-y:auto;

}



/* Footer stays visible */

.chat-footer{

    flex-shrink:0;

}



/* Toggle always visible */

#chatbot-toggler{

    position:fixed;

    right:30px;

    bottom:15px;      /* Move slightly lower */

    width:58px;       /* Smaller button */

    height:58px;      /* Smaller button */

    z-index:9999;

}



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


@media(max-width:900px){


    .chatbot-popup{


        right:20px;

        bottom:90px;


        width:

        calc(100vw - 40px);



        height:

        calc(100vh - 130px);



    }



}



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


@media(max-width:600px){


    body{


        overflow:hidden;


    }



    .chatbot-popup{


        position:fixed;


        inset:0;


        width:100vw;


        height:100dvh;


        max-height:100dvh;



        border-radius:0;



        margin:0;



    }




    .chat-header{


        flex-shrink:0;


        padding:

        18px 20px;



    }




    .chat-body{


        padding:

        16px;



        overflow-y:auto;



    }




    .message-text{


        max-width:

        85%;



        font-size:

        14px;



    }




    .chat-footer{


        padding:

        12px;



        padding-bottom:

        calc(12px + env(safe-area-inset-bottom));



    }




    .chat-form{


        border-radius:

        22px;



    }




    #chatbot-toggler{


        right:20px;


        bottom:20px;


        width:60px;


        height:60px;



    }



}



/* ==========================================================
   VERY SMALL PHONES
========================================================== */


@media(max-width:360px){


    .logo-text{


        font-size:18px;


    }



    .chat-controls button{


        width:38px;


        height:38px;


    }



    .message-text{


        padding:

        12px 14px;



    }


}