/* Nur POC – Gestaltung kommt später */
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: #f4f4f4; color: #111; }
main { max-width: 640px; margin: 0 auto; padding: 24px 16px; }
h1 { margin: 0; }
.sub { margin: 4px 0 16px; color: #555; }
#chat { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 12px;
        height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 85%; padding: 8px 12px; border-radius: 10px; }
.msg p { margin: 0; white-space: pre-wrap; }
.user { align-self: flex-end; background: #dbeafe; }
.assistant { align-self: flex-start; background: #eee; }
.wait { align-self: flex-start; color: #777; font-style: italic; }
.error { align-self: flex-start; background: #fde2e2; }
.stamp { display: block; margin-top: 4px; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .04em; }
form { display: flex; gap: 8px; margin-top: 12px; }
input { flex: 1; padding: 10px; font: inherit; border: 1px solid #ccc; border-radius: 6px; }
button { padding: 10px 16px; font: inherit; border: 0; border-radius: 6px; background: #111; color: #fff; cursor: pointer; }
button:disabled { opacity: .5; }
footer { margin-top: 16px; font-size: 13px; color: #777; }