* { box-sizing: border-box; }
body { font: 16px/1.5 system-ui, sans-serif; margin: 0; background: #fafafa; color: #222; }
header { display: flex; justify-content: space-between; align-items: center;
         padding: 12px 16px; background: #1a73e8; color: white; }
header h1 { font-size: 18px; margin: 0; }
header button { background: white; color: #1a73e8; border: 0; padding: 6px 12px;
                border-radius: 4px; cursor: pointer; font-weight: 600; }
main { max-width: 720px; margin: 16px auto; padding: 0 16px;
       display: flex; flex-direction: column; gap: 12px; }
.msg { padding: 12px 14px; border-radius: 8px; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { background: #e8f0fe; align-self: flex-end; max-width: 85%; }
.msg.bot { background: white; border: 1px solid #ddd; align-self: flex-start; max-width: 95%; }
.msg.error { background: #fce8e6; border: 1px solid #f5b5b0; color: #b00020; }
.msg.busy::after { content: "…"; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
form { display: flex; gap: 8px; max-width: 720px; margin: 0 auto 16px;
       padding: 0 16px; }
textarea { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px;
           font: inherit; resize: vertical; }
form button { background: #1a73e8; color: white; border: 0; padding: 0 16px;
              border-radius: 4px; cursor: pointer; font-weight: 600; }
form button:disabled { background: #999; cursor: not-allowed; }