:root {
  --sand: #fdf8ef; --card: #ffffff; --ink: #1f2933; --soft: #52606d; --line: #d9d2c3; --edge: #7f7a6a;
  --teal: #0b6e6e; --teal-dark: #08504f; --teal-pale: #dff1ef;
  --coral: #b93a0d; --coral-pale: #fde8df; --green: #1b6b3a; --green-pale: #e1f3e8; --amber: #8a5a00; --amber-pale: #fdf0cf;
  --radius: 16px;
}
* { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sand); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45; }
h1 { font-size: 1.6rem; margin: 0 0 .4rem; }
h2 { font-size: 1.25rem; margin: 0 0 .4rem; }
h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
p { margin: 0 0 .7rem; }
.small { font-size: .85rem; color: var(--soft); }
.loading { padding: 3rem 1rem; text-align: center; color: var(--soft); }

.shell { max-width: 640px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; background: var(--teal); color: #fff; padding-top: max(.8rem, env(safe-area-inset-top)); }
.top .brand { font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; }
.top .who { font-size: .85rem; opacity: .95; }
main { flex: 1; padding: 1rem; padding-bottom: 6rem; }
nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
nav.tabs .inner { display: flex; width: 100%; max-width: 640px; }
nav.tabs button { flex: 1; border: 0; background: none; padding: .55rem .2rem .5rem; font: inherit; font-size: .78rem; color: var(--soft); display: flex; flex-direction: column; align-items: center; gap: .1rem; min-height: 58px; cursor: pointer; }
nav.tabs button .ico { font-size: 1.35rem; line-height: 1; }
nav.tabs button[aria-current="page"] { color: var(--teal-dark); font-weight: 700; box-shadow: inset 0 3px 0 var(--teal); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: .9rem; }
.card.center { text-align: center; }
.narrow { max-width: 460px; margin: 1.5rem auto; padding: 0 1rem; }

label { display: block; font-weight: 600; margin: .8rem 0 .25rem; }
input[type="text"], input[type="password"], input[type="number"], textarea, select {
  width: 100%; font: inherit; padding: .75rem .8rem; border: 2px solid var(--edge); border-radius: 12px; background: #fff; color: var(--ink); min-height: 52px;
}
textarea { resize: vertical; min-height: 52px; }
input:focus, textarea:focus, select:focus, button:focus-visible { outline: 3px solid #f2a33a; outline-offset: 2px; }

.btn { font: inherit; font-weight: 700; min-height: 52px; padding: .65rem 1.1rem; border-radius: 14px; border: 2px solid var(--teal); background: #fff; color: var(--teal-dark); cursor: pointer; }
.btn.primary { background: var(--teal); color: #fff; }
.btn.danger { border-color: var(--coral); color: var(--coral); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.small { min-height: 44px; padding: .4rem .8rem; font-size: .9rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1; }

.notice { border-radius: 12px; padding: .7rem .9rem; margin: .7rem 0; }
.notice.error { background: var(--coral-pale); color: #7a2306; border: 1px solid #f0b9a2; }
.notice.ok { background: var(--green-pale); color: #124a28; border: 1px solid #a9d9b9; }
.notice.info { background: var(--teal-pale); color: #063d3c; border: 1px solid #a8d4d0; }

.messages { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .8rem; }
.bubble { max-width: 88%; padding: .65rem .9rem; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.user { align-self: flex-end; background: var(--teal); color: #fff; border-bottom-right-radius: 4px; }
.bubble.assistant { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.badge { font-size: .8rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; background: var(--green-pale); color: var(--green); }
.thinking { color: var(--soft); padding: .2rem .4rem; }
.thinking::after { content: ""; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.composer { position: sticky; bottom: 70px; background: var(--sand); padding: .4rem 0 .2rem; }
.composer .row { align-items: stretch; flex-wrap: nowrap; }
.composer textarea { min-height: 52px; max-height: 8rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.chip { font: inherit; border: 2px solid var(--edge); background: #fff; border-radius: 999px; padding: .5rem .9rem; min-height: 44px; cursor: pointer; color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-pale); font-weight: 700; }

.choices { display: flex; flex-direction: column; gap: .5rem; margin: .4rem 0; }
.choice { font: inherit; text-align: left; border: 2px solid var(--edge); background: #fff; border-radius: 14px; padding: .7rem .9rem; min-height: 52px; cursor: pointer; color: var(--ink); }
.choice[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-pale); }
.choice .t { font-weight: 700; display: block; }
.choice .d { font-size: .85rem; color: var(--soft); display: block; }
.choice .tick { float: right; font-weight: 700; color: var(--teal-dark); }

.idea h3 { margin-bottom: .2rem; }
.tag { display: inline-block; font-size: .78rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; background: var(--teal-pale); color: var(--teal-dark); margin-right: .4rem; }
.tag.pending { background: var(--amber-pale); color: var(--amber); }
.tag.accepted { background: var(--green-pale); color: var(--green); }
.tag.declined { background: #ececec; color: #444; }
.tag.off { background: var(--coral-pale); color: var(--coral); }
.place ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.place li { margin-bottom: .3rem; }
.linkbox { display: flex; gap: .5rem; }
.linkbox input { font-size: .85rem; }
details { margin-top: .6rem; }
summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
code { background: #efe9da; padding: .1rem .35rem; border-radius: 6px; font-size: .85rem; overflow-wrap: anywhere; }
.people .person { padding: .7rem 0; border-top: 1px solid var(--line); }
.people .person:first-child { border-top: 0; }