* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background: #f7f7fa;
  color: #1c1c1e;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid #e5e5ea;
}
.topbar .brand { font-weight: 700; text-decoration: none; color: #1c1c1e; }
.topbar nav { display: flex; gap: 1.25rem; align-items: center; }
.topbar nav a { text-decoration: none; color: #3a3a3c; }
.link-btn { background: none; border: none; color: #3a3a3c; cursor: pointer; font: inherit; padding: 0; }
main { max-width: 640px; margin: 0 auto; padding: 2rem 1.5rem; }
.card {
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.card.narrow { max-width: 420px; margin-left: auto; margin-right: auto; }
label { display: block; margin-top: 0.75rem; margin-bottom: 0.25rem; font-size: 0.9rem; }
input[type=email], input[type=text], textarea {
  width: 100%; padding: 0.6rem; border: 1px solid #d1d1d6; border-radius: 8px; font: inherit;
}
button[type=submit] {
  margin-top: 1rem; padding: 0.6rem 1.2rem; border: none; border-radius: 8px;
  background: #1c1c1e; color: #fff; cursor: pointer; font: inherit;
}
.muted { color: #6e6e73; font-size: 0.9rem; }
.error { color: #d70015; }
.dev-note { background: #fff4e5; border: 1px solid #ffcc80; border-radius: 8px; padding: 0.75rem; word-break: break-all; }
.appt-list, .thread-list { list-style: none; padding: 0; margin: 0; }
.appt-list li, .thread-list li {
  padding: 0.75rem 0; border-bottom: 1px solid #f0f0f2; display: flex; flex-direction: column; gap: 0.15rem;
}
.thread-list li { flex-direction: row; justify-content: space-between; align-items: center; }
.badge { background: #d70015; color: #fff; border-radius: 10px; padding: 0.1rem 0.5rem; font-size: 0.75rem; }
.thread { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.msg { padding: 0.75rem 1rem; border-radius: 10px; max-width: 80%; }
.msg-patient { background: #d1e7ff; align-self: flex-end; }
.msg-staff { background: #fff; border: 1px solid #e5e5ea; align-self: flex-start; }
.msg-meta { font-size: 0.75rem; color: #6e6e73; margin-bottom: 0.25rem; }