/* ===========================
   JARVIS BAR
=========================== */

.jarvis-bar{

position:fixed;

left:50%;

bottom:18px;

transform:translateX(-50%);

width:92%;

max-width:520px;

height:60px;

display:flex;

align-items:center;

gap:10px;

padding:0 10px;

background:rgba(20,20,20,.92);

backdrop-filter:blur(20px);

border-radius:40px;

border:1px solid rgba(255,193,7,.35);

box-shadow:
0 0 12px rgba(255,193,7,.45),
0 0 30px rgba(255,193,7,.20);

z-index:999999;

animation:jarvisGlow 2s infinite;

}

.jarvis-bar input{

flex:1;

min-width:0;

height:100%;

background:transparent;

border:none;

outline:none;

color:#fff;

font-size:16px;

padding-left:16px;

}

.jarvis-bar input::placeholder{

color:#bdbdbd;

}

#sendBtn,
#micBtn{

width:44px;

height:44px;

border:none;

border-radius:50%;

background:#ff9800;

color:#fff;

font-size:20px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

transition:.3s;

box-shadow:0 0 15px rgba(255,152,0,.8);

}

#sendBtn:hover,
#micBtn:hover{

transform:scale(1.08);

box-shadow:0 0 25px rgba(255,152,0,1);

}

/* ===========================
   CHAT BOX
=========================== */

#chatBox{

position:fixed;

left:50%;

bottom:88px;

transform:translateX(-50%);

width:92%;

max-width:340px;

max-height:180px;

overflow-y:auto;

display:flex;

flex-direction:column;

gap:8px;

padding:6px;

z-index:999998;

}

.bot-message{

align-self:flex-start;

background:#2a2a2a;

color:#fff;

padding:8px 12px;

border-radius:14px;

font-size:14px;

max-width:80%;

}

.user-message{

align-self:flex-end;

background:#ff9800;

color:#fff;

padding:8px 12px;

border-radius:14px;

font-size:14px;

max-width:80%;

}

/* ===========================
   GLOW
=========================== */

@keyframes jarvisGlow{

0%{

box-shadow:
0 0 12px rgba(255,193,7,.35),
0 0 25px rgba(255,193,7,.18);

}

50%{

box-shadow:
0 0 25px rgba(255,193,7,.9),
0 0 55px rgba(255,193,7,.45);

}

100%{

box-shadow:
0 0 12px rgba(255,193,7,.35),
0 0 25px rgba(255,193,7,.18);

}

}

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

@media(max-width:768px){

.jarvis-bar{

width:94%;

max-width:380px;

height:56px;

bottom:12px;

padding:0 8px;

gap:8px;

}

.jarvis-bar input{

font-size:15px;

padding-left:12px;

}

#sendBtn,
#micBtn{

width:40px;

height:40px;

font-size:18px;

}

#chatBox{

width:94%;

max-width:300px;

bottom:76px;

max-height:150px;

}

}