* { box-sizing: border-box; }
body { margin: 0; font: 20px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1c1c1e; background: #faf8f5; }
main { max-width: 640px; margin: 0 auto; padding: 20px 18px 40px; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0.6em 0; }
p { margin: 0.7em 0; }
.who { display: flex; align-items: center; gap: 12px; }
.photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #e4dfd7; }
.name { font-size: 1.3rem; font-weight: 600; }
.field { margin: 1em 0; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input { font: inherit; width: 100%; padding: 12px 14px; border: 2px solid #c9c2b6; border-radius: 12px; background: #fff; }
.hint { color: #b3261e; font-size: 0.9rem; margin: 0.4em 0 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 1.2em 0; padding: 14px; background: #fff; border: 1px solid #d8d2c8; border-radius: 12px; }
.consent input { width: 28px; height: 28px; flex: none; margin-top: 2px; }
.choices { display: grid; gap: 14px; }
.note { font-size: 0.85rem; color: #5b5750; margin: 0.4em 0 0; }
button { font: inherit; font-weight: 600; padding: 14px 20px; border-radius: 12px; border: 2px solid #2b5fd9; cursor: pointer; width: 100%; min-height: 54px; }
button.primary { background: #2b5fd9; color: #fff; }
button.secondary { background: #fff; color: #2b5fd9; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.thread { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.bubble { max-width: 88%; padding: 12px 16px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.interviewer { background: #fff; border: 1px solid #d8d2c8; align-self: flex-start; }
.bubble.prospect { background: #2b5fd9; color: #fff; align-self: flex-end; }
.bubble.pending { opacity: 0.7; }
.bubble.typing { color: #8a857c; }
.composer { display: grid; gap: 10px; }
textarea { font: inherit; padding: 12px 14px; border: 2px solid #c9c2b6; border-radius: 12px; resize: vertical; width: 100%; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.status { color: #5b5750; font-size: 0.95rem; }
.status.error { color: #b3261e; }
