/* ============================
   STORNOX AI CHATBOT
============================ */

:root{

--navy:#0a0e1a;
--navy2:#111827;
--card:#141c2e;
--card2:#1b2438;
--border:rgba(255,255,255,.08);

--primary:#00d4c8;
--primary2:#0aa6ff;

--text:#f5f7fb;
--text2:#aab4c5;

--shadow:0 20px 60px rgba(0,0,0,.45);

--radius:18px;

font-family:"Cabinet Grotesk",sans-serif;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:var(--navy);

color:var(--text);

font-family:"Cabinet Grotesk",sans-serif;

}


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

#chatToggle{

position:fixed;

right:25px;

bottom:25px;

width:70px;

height:70px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

cursor:pointer;

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

box-shadow:
0 15px 40px rgba(0,212,200,.35);

transition:.3s;

z-index:99999;

color:white;

}

#chatToggle:hover{

transform:translateY(-4px) scale(1.05);

}


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

#chatWindow{
    position:fixed;
    right:25px;
    bottom:0px;

    width:420px;
    height:500px;

    background:#0f172a;

    border-radius:20px;

    display:none;
    flex-direction:column;

    overflow:hidden;

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

    box-shadow:
    0 25px 60px rgba(0,0,0,.45);

    z-index:999999;
}


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

.chat-header{

height:80px;

background:linear-gradient(135deg,#00d4c8,#0aa6ff);

padding:18px;

display:flex;

align-items:center;

justify-content:space-between;

color:white;

}

.header-left{

display:flex;

align-items:center;

gap:14px;

}

.bot-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #ffffff;
}

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

.header-left h3{

font-size:18px;

}

.header-left p{

font-size:13px;

opacity:.8;

}

.header-right{

display:flex;

gap:16px;

font-size:24px;

cursor:pointer;

}

.header-right span:hover{

opacity:.7;

}


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

.chat-body{

flex:1;

background:#111827;

padding:25px;

overflow-y:auto;

}

.chat-body::-webkit-scrollbar{

width:6px;

}

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

background:#2c405a;

border-radius:50px;

}


/* ============================
Bot Message
============================ */

.bot-message{

display:flex;

align-items:flex-start;

gap:15px;

margin-bottom:25px;

}

.bot-message .avatar{

width:38px;

height:38px;

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

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:white;

font-size:18px;

flex-shrink:0;

}

.bot-message .message{

background:#1f2937;

padding:18px;

border-radius:18px;

max-width:290px;

color:white;

line-height:1.7;

font-size:15px;

}

.bot-message h4{

margin-bottom:6px;

font-size:16px;

}

.bot-message p{

font-size:14px;

line-height:1.6;

color:var(--text2);

}


/* ============================
User Message
============================ */

.user-message{

display:flex;

justify-content:flex-end;

margin-bottom:18px;

}

.user-message .message{

background:#00d4c8;

padding:16px;

border-radius:18px 18px 4px 18px;

color:#001b1b;

font-weight:600;

}


/* ============================
Footer
============================ */

.chat-footer{

height:82px;

background:#141c2e;

padding:15px;

display:flex;

gap:10px;

}

.chat-footer input{

height:52px;

background:#0b1220;

border:1px solid #263244;

border-radius:14px;

padding:0 73px;

color:white;

font-size:15px;

}
.chat-footer input::placeholder{

color:#6f7b90;

}

.chat-footer button{

width:48px;

height:48px;

border:none;

cursor:pointer;

border-radius:50%;

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

display:flex;

align-items:center;

justify-content:center;

color:white;

transition:.3s;

}

.chat-footer button:hover{

transform:scale(1.08);

}


/* ============================
Typing Loader
============================ */

.typing{

display:flex;

gap:5px;

padding:10px 15px;

background:var(--card2);

border-radius:18px;

width:70px;

}

.typing span{

width:8px;

height:8px;

background:var(--primary);

border-radius:50%;

animation:typing 1.2s infinite;

}

.typing span:nth-child(2){

animation-delay:.2s;

}

.typing span:nth-child(3){

animation-delay:.4s;

}

@keyframes typing{

0%{

opacity:.3;

transform:translateY(0);

}

50%{

opacity:1;

transform:translateY(-5px);

}

100%{

opacity:.3;

transform:translateY(0);

}

}

/* ============================================
   TARA CHATBOT OPTIONS
   ============================================ */

.tara-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 10px 0 14px 0;
    padding: 0 4px;
    box-sizing: border-box;
}


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

.tara-option {
    width: 100%;
    display: block;

    padding: 11px 14px;

    border: 1px solid rgba(0, 220, 220, 0.25);

    border-radius: 10px;

    background: #182235;

    color: #ffffff;

    font-size: 13px;

    line-height: 1.4;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;

    font-family: inherit;

    box-sizing: border-box;
}


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

.tara-option:hover {

    background: #20304a;

    border-color: #00d5d5;

    transform: translateY(-1px);

}


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

.tara-option:active {

    transform: scale(0.98);

}


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

.tara-option:focus {

    outline: none;

    border-color: #00d5d5;

    box-shadow:
        0 0 0 2px rgba(0, 213, 213, 0.15);

}

.typing-message {
    min-width: 35px;
    min-height: 24px;
    display: flex;
    align-items: center;
}

.typing-text {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 3px;
    line-height: 10px;
}

.typing-dots {
    display: flex;
    gap: 5px;
    align-items: center;
}

.typing-dots span {
    width: 7px;
    height: 7px;
    background: #777;
    border-radius: 50%;
    display: inline-block;
    animation: typingBounce 1.2s infinite ease-in-out;
}

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

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

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }

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

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

@media (max-width: 600px) {

    .tara-options {

        gap: 7px;

    }

    .tara-option {

        font-size: 12px;

        padding: 10px 12px;

    }

}

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

@media(max-width:600px){

#chatWindow{

width:100%;

height:100%;

right:0;

bottom:0;

border-radius:0;

}

#chatToggle{

width:68px;

height:68px;

background:linear-gradient(135deg,#00d4c8,#0aa6ff);

border-radius:50%;

box-shadow:

0 15px 40px rgba(0,212,200,.35);

}

}