:root {
  color-scheme: dark;
  font-family: "Segoe UI", sans-serif;
  background: #111820;
  color: #edf5fb;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 14px; background: linear-gradient(160deg,#0d151d,#172938); }
header { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
header img { width: 52px; height: 52px; object-fit: cover; border-radius: 12px; }
h1 { margin: 0; font-size: 23px; }
h2 { font-size: 16px; margin-top: 0; }
header span, label { color: #9fc1d8; font-size: 12px; }
.card, #messages { background: rgba(8,17,25,.8); border: 1px solid #36566b; border-radius: 12px; padding: 12px; }
input, textarea {
  width: 100%; margin: 6px 0 10px; padding: 10px; border: 1px solid #52748a;
  border-radius: 8px; background: #0d1821; color: #fff; resize: vertical;
}
button {
  border: 0; border-radius: 8px; padding: 10px 14px; background: #20a8dc;
  color: #041018; font-weight: 700; cursor: pointer;
}
button.secondary { background: #38566a; color: #edf5fb; }
button.link { width: 100%; margin-top: 10px; background: transparent; color: #9fc1d8; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#messages { min-height: 180px; max-height: 48vh; overflow: auto; margin-bottom: 12px; }
.message { white-space: pre-wrap; margin: 8px 0; padding: 9px; border-radius: 8px; }
.user { background: #21465e; }
.jessica { background: #183023; }
.error { color: #ff9b9b; white-space: pre-wrap; }
.busy { opacity: .55; pointer-events: none; }