/*
======================================================
Vritti Group Chatbot
Version : 1.0
File : chatbot.css
======================================================
*/

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

:root{

    --primary:#0F6CBD;

    --primary-dark:#0A57A3;

    --secondary:#F5F9FF;

    --white:#FFFFFF;

    --text:#1F2937;

    --text-light:#6B7280;

    --border:#E5E7EB;

    --success:#22C55E;

    --error:#EF4444;

    --shadow:0 10px 30px rgba(0,0,0,.12);

    --radius:18px;

    --transition:.3s ease;

    --font:"Segoe UI",Arial,sans-serif;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    font-family:var(--font);

}

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

#chatbot-launcher{

    position:fixed;

    right:30px;

    bottom:30px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    box-shadow:var(--shadow);

    transition:var(--transition);

    z-index:99999;

}

#chatbot-launcher:hover{

    transform:scale(1.08);

}

#chatbot-launcher img{

    width:36px;

    height:36px;

}

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

#chatbot-window{

    position:fixed;

    right:22px;

    bottom:92px;

    width:330px;

    height:510px;

    max-width:calc(100vw - 44px);

    max-height:calc(100vh - 110px);

    background:var(--white);

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

    display:flex;

    flex-direction:column;

    transform:translateY(30px);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:99999;

}
#chatbot-window.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

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

.chat-header{

    background:linear-gradient(

        135deg,

        #0F6CBD,

        #2196F3

    );

    color:#fff;

    padding:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.header-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.header-left img{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff;

    padding:5px;

}

.header-left h3{

    font-size:18px;

    font-weight:700;

}

.header-left span{

    font-size:12px;

    opacity:.9;

}

#chatbot-close{

    border:none;

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

    color:#fff;

    width:36px;

    height:36px;

    border-radius:50%;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

#chatbot-close:hover{

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

}

/*==============================
PROGRESS
==============================*/

.progress-wrapper{

    height:5px;

    background:#E5E7EB;

}

#chatbot-progress{

    width:0;

    height:100%;

    background:#0F6CBD;

    transition:.3s;

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

#chatbot-body{

    flex:1;

    overflow-y:auto;

    padding:18px;

    background:#F8FAFD;

    scroll-behavior:smooth;

}

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

#chatbot-body::-webkit-scrollbar{

    width:6px;

}

#chatbot-body::-webkit-scrollbar-track{

    background:transparent;

}

#chatbot-body::-webkit-scrollbar-thumb{

    background:#C9D6E8;

    border-radius:20px;

}

#chatbot-body::-webkit-scrollbar-thumb:hover{

    background:#9FB7D8;

}

/*==============================
CHAT ROW
==============================*/

.chat-row{

    display:flex;

    align-items:flex-end;

    margin-bottom:16px;

    animation:chatFade .25s ease;

}

.chat-row.bot{

    justify-content:flex-start;

}

.chat-row.user{

    justify-content:flex-end;

}

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

.chat-avatar{

    width:38px;

    height:38px;

    flex-shrink:0;

}

.chat-avatar img{

    width:38px;

    height:38px;

    border-radius:50%;

    object-fit:cover;

    background:#fff;

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

    padding:4px;

}

/*==============================
CHAT BUBBLE
==============================*/

.chat-bubble{

    max-width:78%;

    padding:14px 16px;

    border-radius:16px;

    line-height:1.6;

    font-size:14px;

    word-break:break-word;

}

/*==============================
BOT BUBBLE
==============================*/

.bot-bubble{

    background:#fff;

    color:var(--text);

    margin-left:10px;

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

    border-top-left-radius:6px;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

}

/*==============================
USER BUBBLE
==============================*/

.user-bubble{

    background:linear-gradient(

        135deg,

        var(--primary),

        #3A9BFF

    );

    color:#fff;

    margin-right:10px;

    border-top-right-radius:6px;

    box-shadow:0 5px 14px rgba(15,108,189,.25);

}

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

.chat-title{

    text-align:center;

    font-weight:700;

    font-size:15px;

    color:var(--primary);

    margin:20px 0 15px;

}

/*==============================
DIVIDER
==============================*/

.chat-divider{

    width:100%;

    height:1px;

    background:var(--border);

    margin:20px 0;

}

/*==============================
LINKS
==============================*/

.chat-bubble a{

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

}

.chat-bubble a:hover{

    text-decoration:underline;

}

/*==============================
LIST
==============================*/

.chat-bubble ul{

    margin-top:8px;

    padding-left:20px;

}

.chat-bubble li{

    margin:6px 0;

}

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

@keyframes chatFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*==============================
CHAT OPTIONS
==============================*/

.chat-options{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin:15px 0;

}

/*==============================
OPTION BUTTON
==============================*/

.chat-option-btn{

    width:100%;

    border:none;

    background:#fff;

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

    border-radius:14px;

    padding:14px 16px;

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

    transition:var(--transition);

    text-align:left;

    font-size:15px;

    color:var(--text);

    box-shadow:0 2px 8px rgba(0,0,0,.04);

}

.chat-option-btn:hover{

    border-color:var(--primary);

    background:#F4F9FF;

    transform:translateY(-2px);

}

.chat-option-btn:active{

    transform:scale(.98);

}

.option-icon{

    font-size:22px;

    width:28px;

    text-align:center;

}

.option-title{

    font-weight:600;

}

/*==============================
SERVICE CARD
==============================*/

.service-card{

    background:#fff;

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

    border-radius:16px;

    padding:16px;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:0 2px 10px rgba(0,0,0,.05);

}

.service-card:hover{

    border-color:var(--primary);

    transform:translateY(-3px);

    box-shadow:0 10px 24px rgba(15,108,189,.12);

}

.service-card h4{

    color:var(--primary);

    font-size:16px;

    margin-bottom:8px;

}

.service-card p{

    font-size:13px;

    color:var(--text-light);

    line-height:1.5;

}

/*==============================
FOOTER
==============================*/

#chatbot-footer{

    padding:16px;

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

    background:#fff;

}

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

.chat-input-form{

    display:flex;

    gap:10px;

    align-items:flex-end;

}

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

.chat-input-form input{

    height:50px;

    padding:0 16px;

    font-size:15px;

    border:1px solid #D8DEE9;

    border-radius:14px;

}
.chat-input-form input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(15,108,189,.12);

}

/*==============================
TEXTAREA
==============================*/

.chat-input-form textarea{

    flex:1;

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

    border-radius:12px;

    padding:12px;

    resize:none;

    font-size:14px;

    outline:none;

    transition:.25s;

    min-height:100px;

    font-family:inherit;

}

.chat-input-form textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(15,108,189,.12);

}

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

.chat-input-form button{

    border:none;

    background:var(--primary);

    color:#fff;

    padding:0 20px;

    height:48px;

    border-radius:12px;

    cursor:pointer;

    font-weight:600;

    transition:var(--transition);

}

.chat-input-form button:hover{

    background:var(--primary-dark);

}

.chat-input-form button:disabled{

    opacity:.6;

    cursor:not-allowed;

}

/*==============================
PLACEHOLDER
==============================*/

.chat-input-form input::placeholder,

.chat-input-form textarea::placeholder{

    color:#9CA3AF;

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

.typing-row{

    margin-bottom:16px;

}

.typing{

    display:flex;

    align-items:center;

    gap:6px;

    min-height:48px;

}

.typing span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

    animation:typingBounce 1.2s infinite;

}

.typing span:nth-child(2){

    animation-delay:.2s;

}

.typing span:nth-child(3){

    animation-delay:.4s;

}

@keyframes typingBounce{

    0%,
    60%,
    100%{

        transform:translateY(0);

        opacity:.4;

    }

    30%{

        transform:translateY(-6px);

        opacity:1;

    }

}

/*==============================
LOADER
==============================*/

.chat-loader{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px;

    color:var(--text-light);

    font-size:14px;

}

.loader-spinner{

    width:18px;

    height:18px;

    border:3px solid #D9E7F8;

    border-top:3px solid var(--primary);

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

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

.chat-success{

    background:#ECFDF5;

    border:1px solid #BBF7D0;

    border-radius:16px;

    padding:18px;

    margin:16px 0;

    text-align:center;

    animation:chatFade .3s ease;

}

.success-icon{

    font-size:36px;

    margin-bottom:10px;

}

.success-text{

    color:#166534;

    font-weight:600;

    line-height:1.6;

}

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

.chat-error{

    background:#FEF2F2;

    border:1px solid #FECACA;

    border-radius:14px;

    padding:14px;

    margin:12px 0;

    display:flex;

    align-items:flex-start;

    gap:10px;

    animation:chatFade .25s ease;

}

.error-icon{

    font-size:18px;

    color:var(--error);

}

.error-text{

    color:#991B1B;

    font-size:14px;

    line-height:1.6;

}

/*==============================
DISABLED
==============================*/

.chat-input-form input:disabled,

.chat-input-form textarea:disabled,

.chat-input-form button:disabled{

    opacity:.6;

    cursor:not-allowed;

}

/*==============================
UTILITY
==============================*/

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

/*==============================
RESPONSIVE
==============================*/

@media (max-width:768px){

    #chatbot-window{

        width:100%;

        height:100%;

        right:0;

        bottom:0;

        border-radius:0;

    }

    #chatbot-launcher{

        right:20px;

        bottom:20px;

    }

    .chat-bubble{

        max-width:85%;

    }

}

@media (max-width:480px){

    .chat-header{

        padding:15px;

    }

    .header-left h3{

        font-size:16px;

    }

    .header-left span{

        font-size:11px;

    }

    #chatbot-body{

        padding:14px;

    }

    .chat-input-form{

        flex-direction:column;

        align-items:stretch;

    }

    .chat-input-form input,

    .chat-input-form textarea,

    .chat-input-form button{

        width:100%;

    }

    .chat-input-form button{

        margin-top:10px;

    }

    .service-card{

        padding:14px;

    }

    .chat-option-btn{

        padding:14px;

    }

}

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

button:focus,

input:focus,

textarea:focus{

    outline:none;

}

.chat-option-btn:focus-visible,

.chat-input-form button:focus-visible,

#chatbot-close:focus-visible,

#chatbot-launcher:focus-visible{

    outline:3px solid rgba(15,108,189,.35);

    outline-offset:2px;

}

/*==============================
SELECTION
==============================*/

::selection{

    background:var(--primary);

    color:#fff;

}

/*==============================
SMOOTH TRANSITIONS
==============================*/

button,

input,

textarea,

.service-card,

.chat-option-btn,

#chatbot-launcher,

#chatbot-window{

    transition:all .3s ease;

}

/*==============================
IMAGE SAFETY
==============================*/

img{

    max-width:100%;

    display:block;

}

/*==============================
REDUCE MOTION
==============================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*==============================
PRINT
==============================*/

@media print{

    #chatbot-window,

    #chatbot-launcher{

        display:none !important;

    }

}