body {
    margin: 1;
    font-family: Arial, sans-serif;
    overflow: hidden;

    background: linear-gradient(270deg, #2b06cd, #8779c7, #2c5364);
    background-size: 600% 600%;
    animation: gradientBG 10s ease infinite;
}

/* Animated Gradient */
@keyframes gradientBG {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

/* Particles Layer */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Chat Box */
.chat-box {
    position: relative;
    z-index: 1;

    width: 380px;
    margin: 70px;
    top: 20%;
    bottom: 69px;

    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);

    padding: 20px;
    border-radius: 15px 0 0 15px;
    color: white;
}

/* Chat Area */
#chat {
    height: 500px;
    overflow-y: auto;
    margin-bottom: 11px;
}

/* Messages */
.user {
    text-align: right;
    margin: 6px;
}

.bot {
    text-align: left;
    margin: 5px;
}

/* Input */
input {
    width: 95%;
    padding: 10px;
    border-radius: 20px;
    border: none;
}
/* Default Dark Theme */
body {
    background: linear-gradient(270deg, #000000, #000000, #000000);
    color: rgb(136, 61, 61);
}

/* Light Theme */
body.light {
    background: linear-gradient(270deg, #002e74, #4575c2);
    color: rgb(0, 0, 0);
}

/* Chat Box Light */
body.light .chat-box {
    background: rgba(0,0,0,0.1);
    color: black;
}

/* Button Style */
#themeBtn {
    float: right;
    padding: 5px 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}
.container{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:0;
    margin-top:40px;
}

.history-box{
    width:280px;
    height:580px;
    overflow-y:auto;

    background:rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    margin-left:-2px;
    border-radius:0 15px 15px 0;
    padding:20px;
    color:white;
}

.history-box h3{
    text-align:center;
    margin-bottom:15px;
}

#historyList{
    list-style:none;
    padding:0;
}

#historyList li{

    padding:10px;
    margin-bottom:10px;

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

    border-radius:8px;

    cursor:pointer;

    transition:.3s;
}

#historyList li:hover{
    background:#4da6ff;
}

.history-box button{
    width:100%;
    margin-top:15px;
    padding:10px;
    border:none;
    border-radius:8px;
    cursor:pointer;
}
.input-area{
    display:flex;
    align-items:center;
    gap:10px;
}

#userInput{
    flex:1;
}

#micBtn{
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:20px;
    background:#3b82f6;
    color:white;
    transition:.3s;
}

#micBtn:hover{
    transform:scale(1.08);
}

#micBtn.listening{
    background:#129dd3;
    animation:pulse 1s infinite;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.15);}
    100%{transform:scale(1);}
}
/* Default = Dark Mode */
#micBtn{
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:#4d4c4c;   /* Dark Gray */
    color:white;
    cursor:pointer;
    font-size:18px;
    transition:0.3s;
}

/* Hover in Dark Mode */
#micBtn:hover{
    background:#686666;
    transform:scale(1.08);
}

/* Light Mode */
body.light #micBtn{
    background:#2563eb;   /* Blue */
    color:white;
}

/* Hover in Light Mode */
body.light #micBtn:hover{
    background:#1d4ed8;
}