:root {
  --bg: #faf6f0;
  --card: #ffffff;
  --ink: #33302b;
  --muted: #6d6455; /* ≥4.5:1 on --bg and --card (WCAG AA) */
  --accent: #8c6a4f;
  --accent-ink: #ffffff;
  --bubble-user: #e9dfd2;
  --bubble-bot: #ffffff;
  --border: #e3dccf;
  --error: #9f3f2f; /* ≥4.5:1 on --bg and --card */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1a17;
    --card: #262220;
    --ink: #e8e2d9;
    --muted: #97907f;
    --accent: #b08968;
    --accent-ink: #1d1a17;
    --bubble-user: #3a332c;
    --bubble-bot: #262220;
    --border: #3a3530;
    --error: #e08573;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.overlay {
  position: fixed; inset: 0; z-index: 10;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.gate-card {
  max-width: 26rem; text-align: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 2rem;
}
.gate-mark { font-size: 2.2rem; }
.gate-card h1 { margin: .4rem 0 1rem; font-weight: normal; letter-spacing: .04em; }
.gate-card p { color: var(--muted); line-height: 1.5; }
.gate-question { color: var(--ink); font-weight: bold; }
.gate-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.2rem; }
.gate-card input {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px;
  padding: .6rem .8rem; text-align: center; letter-spacing: .2em;
}
.gate-card input:focus { outline: 1.5px solid var(--accent); }
.lock-error { color: var(--error); font-size: .9rem; }
.lock-footnote { margin-bottom: 0; }
.privacy-row {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 2rem; color: var(--muted); font-size: .85rem;
}
.about-you { margin-top: 1.4rem; color: var(--muted); }
.about-you summary { cursor: pointer; font-size: .9rem; }
.about-you .hint { font-size: .85rem; margin: .5rem 0 0; }
.about-you textarea {
  width: 100%; margin-top: .6rem; resize: vertical; font: inherit;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem;
}
.about-you textarea:focus { outline: 1.5px solid var(--accent); }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
}
.header-right { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.site-header .btn.quiet { white-space: nowrap; }
.brand {
  letter-spacing: .05em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
@media (max-width: 480px) {
  .site-header { padding: .5rem .6rem; font-size: .92rem; }
  .btn.quiet { padding: .3rem .35rem; }
}

main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
main[hidden] { display: none; }

/* The picker scrolls within the flex column so tall content (about-you open on
   a phone) can never slide under the footer and lose its click targets. */
#picker { overflow-y: auto; }
.picker-body { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1rem; width: 100%; }
.picker-body h2 { font-weight: normal; margin: 0 0 .3rem; }
.hint { color: var(--muted); font-size: .92rem; line-height: 1.5; }
.cards { display: grid; gap: .8rem; margin-top: 1.2rem; }
.card {
  text-align: left; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem 1.1rem; cursor: pointer;
  font: inherit; color: inherit; transition: border-color .15s;
}
.card:hover { border-color: var(--accent); }
.card .name { font-size: 1.05rem; }
.card .tag { color: var(--muted); font-size: .9rem; margin-top: .25rem; }

.messages {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .7rem;
  max-width: 46rem; width: 100%; margin: 0 auto;
}
.msg {
  padding: .7rem .95rem; border-radius: 12px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: break-word; max-width: 85%;
  border: 1px solid var(--border);
}
.msg.user { align-self: flex-end; background: var(--bubble-user); }
.msg.bot { align-self: flex-start; background: var(--bubble-bot); }
.msg.bot.pending::after { content: "▋"; opacity: .5; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

.composer {
  display: flex; gap: .6rem; padding: .8rem 1rem 1rem;
  max-width: 46rem; width: 100%; margin: 0 auto;
}
.composer textarea {
  flex: 1; resize: none; font: inherit; color: inherit;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: .6rem .8rem; max-height: 9rem;
}
.composer textarea:focus { outline: 1.5px solid var(--accent); }

.btn {
  font: inherit; font-size: .9rem; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--border); border-radius: 10px; padding: .55rem .9rem;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.quiet { border: none; background: none; color: var(--muted); padding: .3rem .5rem; }
.btn.quiet:hover { color: var(--ink); }

.site-footer {
  text-align: center; color: var(--muted); font-size: .78rem;
  padding: .5rem 1rem .8rem;
}
.site-footer a { color: var(--muted); }
a.btn { text-decoration: none; display: inline-block; }

.prose { line-height: 1.6; }
.prose h3 { font-weight: normal; margin: 1.4rem 0 .4rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin: .4rem 0; }
.prose a { color: var(--accent); }