* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: #0b0f19;
  color: #e9eefc;
}
.app { max-width: 980px; margin: 0 auto; padding: 18px; }
.header { padding: 10px 6px 18px; }
.header h1 { margin: 0 0 6px; font-size: 22px; }
.sub { opacity: .75; font-size: 13px; }

.main { display: grid; grid-template-columns: 1fr; gap: 14px; }

.chat {
  background: #121a2b;
  border: 1px solid #223055;
  border-radius: 14px;
  padding: 14px;
  height: 520px;
  overflow: auto;
}

.msg { display: flex; gap: 10px; margin: 10px 0; }
.bubble {
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 14px;
  line-height: 1.35;
  white-space: pre-wrap;
  border: 1px solid transparent;
}
.bot .bubble { background: #0f2447; border-color: #24406f; }
.user { justify-content: flex-end; }
.user .bubble { background: #1f2a44; border-color: #3b4e78; }

.meta { opacity: .7; font-size: 12px; margin-top: 6px; }

.controls {
  background: #121a2b;
  border: 1px solid #223055;
  border-radius: 14px;
  padding: 12px;
}

.quick-replies { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.quick-replies button {
  border: 1px solid #2c3f6f;
  background: #0c1527;
  color: #e9eefc;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.quick-replies button:hover { background: #142443; }

.input-row { display: flex; gap: 8px; }
input {
  flex: 1;
  border-radius: 10px;
  border: 1px solid #2c3f6f;
  background: #0c1527;
  color: #e9eefc;
  padding: 10px 12px;
  outline: none;
}
button {
  border-radius: 10px;
  border: 1px solid #2c3f6f;
  background: #1b3b7a;
  color: white;
  padding: 10px 12px;
  cursor: pointer;
}
button:hover { filter: brightness(1.05); }
button.secondary { background: #0c1527; }

.footer-row { display: flex; gap: 8px; margin-top: 10px; }