/* ============================
   SHASHI CONSULTANCY CHATBOT
   PART - 1
============================ */

/* Theme Variables */
:root {
    --sc-primary: #f4b400;
    --sc-primary-hover: #ffca28;
    --sc-bg: #07111f;
    --sc-bg-light: #0d1b2a;
    --sc-text: #ffffff;
    --sc-text-light: #d6d6d6;
    --sc-border: rgba(255,255,255,.08);
    --sc-shadow: 0 20px 50px rgba(0,0,0,.35);
    --sc-radius: 18px;
}

/* Container */
#chatbot-container{
    position:fixed;
    left:90px;
    bottom:20px;
    z-index:99999;
    font-family:Arial,Helvetica,sans-serif;
}

/* ===========================
   Floating Button
=========================== */

.sc-chat-toggle{
    width:65px;
    height:65px;
    border:none;
    outline:none;
    cursor:pointer;
    border-radius:50%;
    background:linear-gradient(135deg,#f4b400,#d89600);
    color:#fff;
    font-size:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
    0 15px 35px rgba(0,0,0,.35),
    0 0 20px rgba(244,180,0,.45);

    transition:.35s;
}

.sc-chat-toggle:hover{
    transform:translateY(-4px) scale(1.05);
}

.sc-chat-toggle:active{
    transform:scale(.96);
}

/* ===========================
   Chat Window
=========================== */

.sc-chat-window{

    position:absolute;

    bottom:85px;
    left:0;

    width:360px;
    height:560px;

    background:var(--sc-bg);

    border-radius:20px;

    overflow:hidden;

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

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

    display:flex;

    flex-direction:column;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px) scale(.92);

    transition:.35s;
}

/* Open State */

.sc-chat-window.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0) scale(1);
}

/* ===========================
   Header
=========================== */

.sc-chat-header{

    background:linear-gradient(
        135deg,
        #091321,
        #0f2136
    );

    padding:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

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

}

.sc-chat-title{

    display:flex;

    align-items:center;

    gap:12px;

}

.sc-logo{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#f4b400;

    color:#07111f;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

    font-size:22px;

}

.sc-title h3{

    color:#fff;

    margin:0;

    font-size:17px;

}

.sc-title p{

    margin:4px 0 0;

    font-size:12px;

    color:#cfcfcf;

}

/* Online Dot */

.sc-online{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#00e676;

    display:inline-block;

    margin-right:6px;

    box-shadow:0 0 10px #00e676;

}

/* Close */

.sc-close{

    width:36px;

    height:36px;

    border:none;

    cursor:pointer;

    border-radius:50%;

    color:#fff;

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

    font-size:20px;

    transition:.3s;

}

.sc-close:hover{

    background:#f44336;

}

/* ===========================
   Chat Body
=========================== */

.sc-chat-body{

    flex:1;

    overflow-y:auto;

    padding:18px;

    background:var(--sc-bg-light);

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* ===========================
   Messages
=========================== */

.sc-message{

    max-width:82%;

    padding:13px 16px;

    border-radius:16px;

    line-height:1.55;

    font-size:14px;

    word-wrap:break-word;

    animation:fadeUp .3s ease;

}

/* Bot */

.sc-bot{

    background:#16293f;

    color:#fff;

    border-bottom-left-radius:4px;

    align-self:flex-start;

}

/* User */

.sc-user{

    background:#f4b400;

    color:#111;

    border-bottom-right-radius:4px;

    align-self:flex-end;

    font-weight:600;

}

/* ===========================
   Scrollbar
=========================== */

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

    width:8px;

}

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

    background:#f4b400;

    border-radius:20px;

}

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

    background:#091321;

}

/* ===========================
   Animation
=========================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ============================
   SHASHI CONSULTANCY CHATBOT
   PART - 2
============================ */

/* ===========================
   Input Area
=========================== */

.sc-chat-footer{
    background:var(--sc-bg);
    border-top:1px solid var(--sc-border);
    padding:14px;
}

.sc-input-wrapper{
    display:flex;
    align-items:center;
    gap:10px;
}

.sc-chat-input{
    flex:1;
    height:48px;
    border:none;
    outline:none;
    border-radius:30px;
    padding:0 18px;
    background:#16293f;
    color:#fff;
    font-size:14px;
    transition:.3s;
}

.sc-chat-input::placeholder{
    color:#9ca3af;
}

.sc-chat-input:focus{
    border:1px solid var(--sc-primary);
    box-shadow:0 0 12px rgba(244,180,0,.25);
}

.sc-send-btn{
    width:48px;
    height:48px;
    border:none;
    cursor:pointer;
    border-radius:50%;
    background:var(--sc-primary);
    color:#111;
    font-size:18px;
    font-weight:bold;
    transition:.3s;
    display:flex;
    justify-content:center;
    align-items:center;
}

.sc-send-btn:hover{
    background:var(--sc-primary-hover);
    transform:scale(1.08);
}

/* ===========================
   Quick Reply Buttons
=========================== */

.sc-quick-replies{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}

.sc-chip{
    padding:9px 14px;
    border-radius:999px;
    border:1px solid rgba(244,180,0,.35);
    background:#16293f;
    color:#fff;
    cursor:pointer;
    font-size:13px;
    transition:.3s;
    user-select:none;
}

.sc-chip:hover{
    background:var(--sc-primary);
    color:#111;
    transform:translateY(-2px);
}

/* ===========================
   Action Buttons
=========================== */

.sc-action-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
}

.sc-action-btn{
    flex:1;
    min-width:120px;
    border:none;
    cursor:pointer;
    border-radius:12px;
    padding:12px;
    background:#16293f;
    color:#fff;
    font-size:14px;
    transition:.3s;
}

.sc-action-btn:hover{
    background:var(--sc-primary);
    color:#111;
}

/* ===========================
   Typing Animation
=========================== */

.sc-typing{
    display:flex;
    align-items:center;
    gap:5px;
    background:#16293f;
    width:70px;
    padding:12px 16px;
    border-radius:14px;
}

.sc-typing span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#f4b400;
    animation:typing .9s infinite;
}

.sc-typing span:nth-child(2){
    animation-delay:.15s;
}

.sc-typing span:nth-child(3){
    animation-delay:.3s;
}

@keyframes typing{

    0%{
        opacity:.3;
        transform:translateY(0);
    }

    50%{
        opacity:1;
        transform:translateY(-5px);
    }

    100%{
        opacity:.3;
        transform:translateY(0);
    }

}

/* ===========================
   Time
=========================== */

.sc-time{
    font-size:11px;
    color:#bdbdbd;
    margin-top:4px;
    text-align:right;
}

/* ===========================
   Link Style
=========================== */

.sc-message a{
    color:var(--sc-primary);
    text-decoration:none;
    font-weight:600;
}

.sc-message a:hover{
    text-decoration:underline;
}

/* ===========================
   Mobile Responsive
=========================== */

@media(max-width:600px){

#chatbot-container{

    left:20px;
    bottom:85px;

}

.sc-chat-window{

    width:calc(100vw - 30px);
    height:75vh;
    max-height:620px;

}

.sc-chat-toggle{

    width:58px;
    height:58px;
    font-size:24px;

}

.sc-chat-header{

    padding:15px;

}

.sc-logo{

    width:40px;
    height:40px;
    font-size:18px;

}

.sc-title h3{

    font-size:15px;

}

.sc-title p{

    font-size:11px;

}

.sc-chat-body{

    padding:14px;

}

.sc-message{

    max-width:88%;
    font-size:13px;

}

.sc-chat-footer{

    padding:12px;

}

.sc-chat-input{

    height:44px;
    font-size:13px;

}

.sc-send-btn{

    width:44px;
    height:44px;

}

}

/* ===========================
   Glass Hover
=========================== */

.sc-chat-window:hover{

    box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    0 0 30px rgba(244,180,0,.18);

}

/* ===========================
   Selection
=========================== */

.sc-chat-body ::selection{

    background:var(--sc-primary);
    color:#111;

}