/* ============================
   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:48px;

height:48px;

background:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

}

.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);

}

}


/* ============================
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);

}

}