* { box-sizing: border-box; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background: #0b0f14; color: #e6edf3; }
.app { max-width: 860px; margin: 0 auto; padding: 24px; }
header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
h1 { margin: 0; font-size: 22px; }
small { color: #93a1ad; }

#chat { background: #0f1620; border: 1px solid #1e2733; border-radius: 10px; padding: 16px; }
.messages { height: 60vh; overflow: auto; padding: 8px; border: 1px solid #1e2733; border-radius: 8px; background: #0b111a; }
.msg { padding: 10px 12px; border-radius: 8px; margin: 8px 0; max-width: 80%; white-space: pre-wrap; line-height: 1.35; }
.user { background: #1c2b3a; margin-left: auto; border: 1px solid #2b3b4d; }
.assistant { background: #131c26; border: 1px solid #223042; }
.meta { font-size: 12px; color: #9fb0c1; margin-top: 2px; }

#composer { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
#input { width: 100%; border-radius: 8px; border: 1px solid #213144; background: #0b111a; color: #e6edf3; padding: 10px; }
.row { display: flex; gap: 8px; align-items: center; }
label { width: 100px; color: #aab7c4; font-size: 14px; }
input[type="text"], input[type="number"] {
  flex: 1; border-radius: 6px; border: 1px solid #213144; background: #0b111a; color: #e6edf3; padding: 8px;
}
button { background: #2262ea; color: white; border: 0; border-radius: 8px; padding: 10px 14px; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: default; }

.pfp { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid #223042; }