body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
height: 100%;
}
.app-container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
padding: 10px;
text-align: center;
background-color: rgba(0,0,0,0.5);
color: #fff;
}
main {
flex: 1;
display: flex;
flex-direction: column;
padding: 10px;
}
#chat-window {
flex: 1;
border: 2px solid #fff;
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
overflow-y: auto;
background: rgba(0,0,0,0.2);
}
.user {
text-align: right;
margin: 5px;
color: #00ffea;
}
.bot {
text-align: left;
margin: 5px;
color: #fffa00;
}
.input-container {
display: flex;
gap: 5px;
}
input[type="text"] {
flex: 1;
padding: 8px;
border-radius: 5px;
border: none;
}
button {
padding: 8px 10px;
border-radius: 5px;
border: none;
cursor: pointer;
}
footer {
padding: 10px;
display: flex;
justify-content: space-between;
background-color: rgba(0,0,0,0.5);
color: #fff;
}
/* ----------------------------
Backgrounds
---------------------------- */
.neon-bg {
background: radial-gradient(circle, #0ff, #00f, #0f0);
}
.dark-bg {
background: linear-gradient(#111, #333);
color: #fff;
}
.light-bg {
background: linear-gradient(#eee, #fff);
color: #000;
}