/* body { font-family: system-ui, sans-serif; background: #f6f6f8; margin: 0; }
.container { max-width: 750px; margin: 32px auto; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
h1 { margin-top: 0; }
#banner { background: #fff3cd; color: #333; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; border: 1px solid #ffeeba; }
#chat { height: 60vh; overflow-y: auto; border: 1px solid #eee; border-radius: 8px; padding: 12px; background: #fafafa; }
.msg { padding: 10px 12px; border-radius: 10px; margin: 10px 0; max-width: 90%; }
.msg.user { background: #e7f1ff; margin-left: auto; }
.msg.assistant { background: #f1f3f5; margin-right: auto; }
.input-row { display: flex; gap: 8px; margin-top: 12px; }
.input-row input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #ddd; }
.input-row button { padding: 10px 16px; border-radius: 8px; border: none; background: #3b82f6; color: white; cursor: pointer; }
.input-row button:hover { background: #2563eb; } */

body { font-family: system-ui, sans-serif; background: #f6f6f8; margin: 0; }
.container { max-width: 750px; margin: 32px auto; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
h1 { margin-top: 0; }
#banner { background: #fff3cd; color: #333; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; border: 1px solid #ffeeba; }

#chat { height: 60vh; overflow-y: auto; border: 1px solid #eee; border-radius: 8px; padding: 12px; background: #fafafa; }

/* Big centered welcome banner inside chat (disappears once chat renders) */
.chat-welcome.big-center {
  min-height: calc(60vh - 24px); /* match chat height minus padding */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;

  color: #111;
  background: #ffffff;
  border: 1px dashed #d9d9df;
  border-radius: 12px;

  padding: 18px;
}

.msg { padding: 10px 12px; border-radius: 10px; margin: 10px 0; max-width: 90%; }
.msg.user { background: #e7f1ff; margin-left: auto; }
.msg.assistant { background: #f1f3f5; margin-right: auto; }
.msg.assistant {
  white-space: pre-wrap; /* preserves \n */
  line-height: 1.35;
}


.input-row { display: flex; gap: 8px; margin-top: 12px; }
.input-row input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #ddd; }
.input-row button { padding: 10px 16px; border-radius: 8px; border: none; background: #3b82f6; color: white; cursor: pointer; }
.input-row button:hover { background: #2563eb; }