* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: #f3f4f6; color: #1f2937; }
.app-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.chat-card { width: min(900px, 100%); background: #fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.08); overflow: hidden; }
.chat-header { padding: 24px; border-bottom: 1px solid #e5e7eb; }
.chat-header h1 { margin: 0 0 6px; font-size: 28px; }
.chat-header p { margin: 0; color: #6b7280; }
.chat-log { min-height: 420px; max-height: 60vh; overflow: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px; background: #fafafa; }
.msg { max-width: 75%; padding: 14px 16px; border-radius: 16px; white-space: pre-wrap; line-height: 1.5; }
.msg.assistant { background: #eef2ff; align-self: flex-start; }
.msg.user { background: #111827; color: #fff; align-self: flex-end; }
.composer { padding: 20px 24px 24px; display: grid; gap: 12px; }
textarea { width: 100%; resize: vertical; min-height: 90px; font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid #d1d5db; }
.composer-actions { display: flex; gap: 12px; }
button { border: 0; background: #b72b25; color: #fff; border-radius: 10px; padding: 12px 16px; cursor: pointer; font: inherit; }
button.secondary { background: #1f2937; }
button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 700px) {
  .app-shell { padding: 12px; }
  .chat-card { border-radius: 12px; }
  .msg { max-width: 90%; }
  .composer-actions { flex-direction: column; }
}