* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0b0c10;
  color: #e8e8e8;
}
.wrap { max-width: 900px; margin: 0 auto; padding: 24px; }
.header { margin-bottom: 12px; }
h1 { margin: 0 0 8px 0; font-size: 28px; }
p { margin: 0; opacity: 0.85; }

.controls {
  display: flex;
  gap: 8px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.controls input {
  flex: 1;
  min-width: 260px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #2a2f3a;
  background: #0f1117;
  color: #e8e8e8;
}

.chat {
  height: 58vh;
  overflow: auto;
  padding: 12px;
  border: 1px solid #2a2f3a;
  border-radius: 14px;
  background: #12141a;
}

.bubble {
  padding: 10px 12px;
  margin: 10px 0;
  border-radius: 14px;
  white-space: pre-wrap;
  line-height: 1.35;
}
.bubble.user { background: #1d3557; margin-left: 22%; }
.bubble.assistant { background: #2d2a32; margin-right: 22%; }

.composer { display: flex; gap: 8px; margin-top: 12px; }
.composer input {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #2a2f3a;
  background: #0f1117;
  color: #e8e8e8;
}
button {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #2a2f3a;
  background: #161a22;
  color: #e8e8e8;
  cursor: pointer;
}
button:disabled { opacity: 0.55; cursor: not-allowed; }
small { display: block; margin-top: 8px; opacity: 0.8; }