body {
  font-family: system-ui, sans-serif;
  background: #121212;
  color: #fff;
  padding: 2rem;
  max-width: 600px;
  margin: auto;
}
h1 { color: #00ffe0; }
#chat {
  background: #1e1e1e;
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
  max-height: 300px;
  overflow-y: auto;
}
#loadingBarContainer {
  margin-top: 1rem;
  height: 4px;
  width: 100%;
  background: #333;
  border-radius: 4px;
  overflow: hidden;
  display: none;
}

#loadingBar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00ffe0, #00ccff);
  animation: loadingAnim 2s linear infinite;
}

@keyframes loadingAnim {
  0% { transform: translateX(-100%); width: 100%; }
  100% { transform: translateX(100%); width: 100%; }
}

.message.system {
  font-style: italic;
  color: #888;
  font-size: 0.9em;
}

.msg.system {
  font-style: italic;
  color: #777;
  font-size: 0.9em;
  text-align: center;
}

.msg { margin-bottom: 0.8rem; }
.user { color: #80ffb0; }
.bot { color: #00ccff; }
label, select {
  display: block;
  margin-top: 1rem;
  font-size: 1rem;
  color: #fff;
}
select {
  background: #1e1e1e;
  color: #00ffe0;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 6px;
  font-family: inherit;
}
button {
  margin-top: 1rem;
  padding: 0.8rem 1.2rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: #00ffe0;
  color: #000;
  cursor: pointer;
}
footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid #333;
  font-size: 0.9rem;
  text-align: center;
  color: #aaa;
}
footer a {
  color: #00ffe0;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}