* { box-sizing: border-box; }

:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171717;
  background: #f5f4f1;
}

body { margin: 0; min-height: 100vh; }

.app {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.chat {
  width: min(760px, 100%);
  min-height: min(820px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dedbd5;
  border-radius: 22px;
  overflow: hidden;
}

.chat-header { padding: 42px 42px 24px; border-bottom: 1px solid #ebe8e2; }
.eyebrow { margin: 0 0 12px; font-size: 11px; letter-spacing: .14em; color: #77736c; }
h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1.05; font-weight: 500; }
.intro { max-width: 580px; margin: 16px 0 0; color: #6d6962; line-height: 1.55; }

.messages { flex: 1; overflow-y: auto; padding: 28px 42px; display: flex; flex-direction: column; gap: 16px; }
.message { max-width: 82%; padding: 13px 16px; border-radius: 16px; line-height: 1.5; white-space: pre-wrap; }
.message.assistant { align-self: flex-start; background: #f2f0ec; }
.message.user { align-self: flex-end; background: #171717; color: #fff; }
.message.status { color: #77736c; font-size: 13px; padding: 0; background: transparent; }

.composer { display: flex; gap: 10px; padding: 18px; border-top: 1px solid #ebe8e2; }
textarea { flex: 1; resize: none; border: 1px solid #d8d5cf; border-radius: 14px; padding: 13px 14px; font: inherit; outline: none; }
textarea:focus { border-color: #88837b; }
button { border: 0; border-radius: 14px; padding: 0 20px; background: #171717; color: #fff; font: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }

@media (max-width: 640px) {
  .app { padding: 0; }
  .chat { min-height: 100vh; border: 0; border-radius: 0; }
  .chat-header { padding: 30px 22px 20px; }
  .messages { padding: 22px; }
  .composer { padding: 12px; }
  .message { max-width: 90%; }
}