:root {
  --ink:#24312c; --yellow:#3d6b5a; --brick:#c45c4a; --paper:#f5f2ec; --muted:#6d6a63; --bubble:#fff;
  --accent:#3d6b5a; --accent-soft:#e7f0eb; --line:#e6e1d8; --card:#fff;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --r: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Noto Sans SC","PingFang SC",system-ui,sans-serif;
  color: var(--ink); background: var(--paper); line-height: 1.5;
  min-height: 100dvh;
  padding-bottom: calc(4.6rem + var(--safe-bot));
}
h1,h2,.wordmark { font-weight: 700; }
a { color: var(--accent); }
button,input,textarea,select { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245,242,236,.92);
  backdrop-filter: blur(10px);
  color: var(--ink);
  padding-top: var(--safe-top);
  border-bottom: 1px solid var(--line);
}
.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .9rem; max-width: 42rem; margin: 0 auto;
}
.wordmark { display:flex; align-items:center; gap:.42rem; color: var(--accent); text-decoration: none; font-size: 1rem; font-weight: 800; }
.wordmark img { width:1.75rem; height:1.75rem; border-radius:8px; display:block; }
.lang { display:flex; gap:.2rem; align-items:center; }
.lang a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: .78rem; padding: .22rem .55rem; border-radius:999px; }
.lang a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); border-bottom: 0; }
.topbar {
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: .45rem .8rem;
}
.topbar h1, .warn-line, .two-btns { display: none; }
.btn, .btn-ghost, .btn-send {
  border: 0; cursor: pointer; font-weight: 700; padding: .55rem .85rem; border-radius: 999px;
}
.btn { background: var(--accent); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.danger { background: var(--brick); color: #fff; }
.btn-send { background: var(--accent); color: #fff; padding: .55rem 1rem; }
.flash { font-size: .8rem; font-weight: 600; margin: .35rem 0 0; }
main { max-width: 42rem; margin: 0 auto; }
.screen-pad { padding: .75rem .8rem calc(4.6rem + var(--safe-bot)); }
.lock { margin: 1.1rem .8rem; background: var(--card); border: 1px solid var(--line); padding: 1.1rem; border-radius: var(--r); }
.lock h2 { margin: 0 0 .4rem; }
.fine { font-size: .85rem; color: var(--muted); }
label { display: block; font-size: .78rem; font-weight: 700; margin: .55rem 0 .2rem; color: var(--muted); }
input, textarea, select {
  display: block; width: 100%; max-width: 100%;
  min-height: 2.6rem; padding: .7rem .75rem;
  border: 1px solid var(--line); background: #fff; border-radius: 12px;
}
textarea { min-height: 5rem; resize: vertical; }
.a2hs {
  background: transparent; color: var(--ink);
  margin: 0; padding: 0; font-weight: 600; font-size: .9rem;
  border-radius: 0; border-bottom: 0;
}
.a2hs-toggle { border:0; background:none; color:var(--accent); font:inherit; font-weight:800; padding:.35rem 0; width:100%; text-align:left; cursor:pointer; }
.a2hs ol, #a2hs-steps { margin: .15rem 0 .4rem; padding: 0; font-weight: 500; color: var(--muted); font-size: .85rem; }
#a2hs-steps p { margin: .25rem 0 0; }
.conv {
  display: flex; gap: .75rem; align-items: center;
  width: 100%; text-align: left; background: var(--card);
  border: 0; border-bottom: 1px solid var(--line);
  padding: .95rem 1rem; cursor: pointer;
}
.conv:active { background: var(--accent-soft); }
.av {
  flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
}
.conv .mid { flex: 1; min-width: 0; }
.conv .nm { font-weight: 700; margin: 0; display: flex; align-items: center; gap: .35rem; }
.conv .lm { margin: .15rem 0 0; color: var(--muted); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .tm { flex: 0 0 auto; font-size: .72rem; color: var(--muted); align-self: flex-start; padding-top: .15rem; }
.dot { width: .45rem; height: .45rem; background: var(--brick); border-radius: 50%; display: inline-block; }
.empty { padding: 2.2rem 1.1rem; font-weight: 600; color: var(--muted); }
.thread { display: flex; flex-direction: column; width: 100%; max-width: 100%; height: 100dvh; min-height: 100dvh; overflow: hidden; }
.tiny {
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: .5rem .85rem .6rem; font-size: .82rem;
}
.tiny strong { display: block; }
.backchip { background: none; border: 0; font-weight: 700; padding: 0 0 .25rem; cursor: pointer; color: var(--accent); }
.msgs {
  flex: 1; min-height: 0; overflow-y: auto; padding: .8rem .7rem .6rem;
  display: flex; flex-direction: column; gap: .45rem;
  background: var(--paper);
}
.bubble {
  max-width: 78%; padding: .55rem .75rem; border-radius: 1rem;
  word-break: break-word; white-space: pre-wrap; font-weight: 500;
}
.bubble.them { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-top-left-radius: .25rem; }
.bubble.me { align-self: flex-end; background: var(--accent); color: #fff; border: 0; border-top-right-radius: .25rem; }
.composer {
  position: relative; left: auto; right: auto; bottom: auto;
  z-index: 120; flex: 0 0 auto; width: 100%;
  background: #fff; border-top: 1px solid var(--line);
  padding: .4rem .55rem calc(.45rem + var(--safe-bot)); max-width: none; margin: 0;
  pointer-events: auto;
}
.composer .row { display: flex; gap: .4rem; align-items: flex-end; }
.composer textarea {
  width: auto !important; flex: 1 1 auto; min-width: 0;
  min-height: 2.4rem !important; max-height: 7rem; border-width: 1px; padding: .45rem .55rem;
  pointer-events: auto;
}
.act { font-size: .78rem; font-weight: 700; background: none; border: 0; color: var(--accent); padding: .15rem 0 .3rem; cursor: pointer; }
.remain { font-size: .75rem; color: var(--muted); margin: 0; }
.block {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  background: var(--card); border: 1px solid var(--line);
  padding: 1.05rem 1rem 1.25rem; margin: 0; width: 100%;
  border-radius: 16px;
}
.block h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.block label { display: block; width: 100%; margin: .72rem 0 .28rem; }
.block label:first-child { margin-top: 0; }
.block input, .block select, .block textarea {
  display: block; width: 100%; max-width: 100%;
  min-height: 2.6rem; border-radius: 12px;
}
.block textarea { min-height: 5.2rem; }
.block .btn, .block button[type="submit"] {
  display: block; width: 100%; margin-top: .95rem;
  padding: .9rem 1rem; font-size: 1.02rem; box-sizing: border-box;
}
.recap {
  background: var(--card); border: 1px solid var(--line);
  padding: 1.05rem 1.05rem 1.15rem; margin: 0 0 .7rem;
  border-radius: 16px; width: 100%;
}
.recap strong { display: block; font-size: 1.05rem; }
.recap p { margin: .28rem 0 0; }
.recap .btn { margin-top: .7rem; }
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #fff;
  padding: .2rem .2rem calc(.28rem + var(--safe-bot));
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0;
  width: 100%; max-width: none; margin: 0;
  border-top: 1px solid var(--line);
}
.nav.inner, .seg {
  position: static;
  display: flex;
  grid-template-columns: none;
  width: auto; max-width: none;
  bottom: auto; z-index: 1;
  background: transparent;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  padding: .25rem .7rem .35rem;
  gap: .35rem;
}
.seg button, .nav.inner button { flex: 1; border-radius: 999px; background: #f3f1ec; color: var(--muted); }
.seg button.on, .nav.inner button.on { background: var(--accent-soft); color: var(--accent); }
#tabnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  width: 100%; max-width: none; margin: 0; gap: 0;
  background: #fff;
  border-top: 1px solid var(--line); border-bottom: 0;
  padding: .15rem .15rem calc(.22rem + var(--safe-bot));
}
#tabnav button {
  flex: none; border: 0; border-radius: 0;
  background: transparent; color: #9a968e;
  font-weight: 700; font-size: .82rem;
  padding: .62rem .1rem .5rem; cursor: pointer;
}
#tabnav button.on { background: transparent; color: var(--accent); }
.conv {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: none !important;
}
#pane-msg {
  display: block;
  height: calc(100dvh - 3.2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 calc(4.6rem + var(--safe-bot));
}
.th-del {
  flex: 0 0 auto; align-self: center; margin-left: auto;
  border: 0; background: transparent; color: #c45c4a;
  font: inherit; font-weight: 700; font-size: .88rem;
  padding: .35rem .5rem; cursor: pointer;
}
.th-del:active { background: #fdece8; border-radius: 8px; }
#pane-posts, #pane-new { padding: .7rem .8rem calc(4.6rem + var(--safe-bot)); }

.tab-page[hidden] { display: none !important; }
.nav button {
  background: transparent; color: #9a968e; border: 0; font-weight: 700;
  font-size: .76rem; padding: .5rem .2rem; cursor: pointer;
}
.nav button.on { color: var(--accent); }
.badge { display: inline-block; background: var(--accent-soft); color: var(--accent); font-size: .7rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; }
[hidden] { display: none !important; }

.backchip {
  flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem;
  border: 0; background: transparent; color: var(--accent); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.backchip:active { background: var(--accent-soft); }
.tiny { display: flex; align-items: flex-start; gap: .45rem; }
.tiny .who { flex: 1; min-width: 0; }
.emo-btn { flex: 0 0 2.2rem; height: 2.2rem; border: 0; background: transparent; font-size: 1.35rem; cursor: pointer; padding: 0; }
.emoji-panel { display: flex; flex-wrap: wrap; gap: .1rem; padding: .25rem 0 .15rem; }
.emoji-panel[hidden] { display: none !important; }
.emoji-panel button { width: 2.05rem; height: 2.05rem; border: 0; background: none; font-size: 1.35rem; padding: 0; cursor: pointer; }
body.in-thread #app-nav,
body.in-thread #tabnav,
body.in-thread .topbar,
body.in-thread .a2hs,
body.in-thread > header,
body.in-thread .key-sheet { display: none !important; }
body.in-thread { padding-bottom: 0; }
body.in-thread .composer { bottom: 0; }
body.gate #app-nav, body.gate #tabnav, body.gate > header { display: none !important; }
body.desk #app-nav { display: none !important; }
body.desk > header { display: block; }
body.gate { padding-bottom: 0; }

.tr-btn { border:0; background:none; color:#3d6b5a; font-size:.78rem; font-weight:700; padding:0; cursor:pointer; margin:.15rem 0 0; }
.bwrap { display:flex; flex-direction:column; max-width:78%; }
.bwrap.me { align-self:flex-end; align-items:flex-end; }
.bwrap.them { align-self:flex-start; align-items:flex-start; }
.bwrap .bubble { max-width:100%; }
.bwrap.me .tr-btn { color:#d7e8df; }
.place-row { display:grid; grid-template-columns: 1fr; gap:.45rem; }
.place-row select { width:100%; min-height: 2.6rem; }

.need-pin {
  flex: 0 0 auto;
  width: 100%;
  background: var(--accent-soft);
  border-bottom: 1px solid #cfe0d6;
  padding: .55rem .9rem .6rem;
}
.need-pin .tag { margin: 0; font-size: .78rem; font-weight: 800; color: var(--accent); }
.need-pin .ask { margin: .18rem 0 0; font-size: .9rem; color: var(--ink); font-weight: 600; line-height: 1.4; }
#desk { width: 100%; max-width: none; }
#desk .thread, #app.thread { width: 100%; max-width: none; }
.msgs { width: 100%; }
.bubble { min-width: 0; }

.geo-native {
  position: static !important; width: 100% !important; height: auto !important;
  opacity: 1 !important; pointer-events: auto !important;
  overflow: visible !important;
}
.place-row > div { position: relative; }
.place-row select { display:block !important; width:100%; min-height:2.6rem; padding:.65rem .7rem; font-size:1rem; background:#fff; border-radius:12px; }
.geo-lab { display:block; font-size:.78rem; font-weight:700; margin:.55rem 0 .2rem; color:var(--muted); }
.bar { position: relative; }
.bar-end { position: relative; margin-left: auto; }
.key-btn {
  border: 0; background: transparent; color: var(--accent);
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  font-size: 1.25rem; font-weight: 800; line-height: 1;
  cursor: pointer; padding: 0;
}
.key-btn:active { background: var(--accent-soft); }
.key-sheet {
  position: absolute; right: 0; top: calc(100% + .25rem);
  z-index: 95; min-width: 15.2rem;
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: .55rem;
  box-shadow: 0 14px 40px rgba(36,49,44,.14);
}
.key-sheet .btn, .key-sheet .btn-ghost, .key-sheet .a2hs-toggle {
  display: block; width: 100%; text-align: center;
  margin: 0 0 .4rem; box-sizing: border-box;
}
.key-sheet .a2hs-toggle {
  background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: .55rem .85rem; font-weight: 800;
  text-align: center;
}
.key-sheet .a2hs-toggle::after { content: none; }
.key-sheet #a2hs-steps { padding: .15rem .2rem .35rem; }
.key-sheet .flash { margin: .15rem .2rem 0; color: var(--accent); }
#app.screen-pad { padding: .7rem .8rem calc(4.6rem + var(--safe-bot)); }
#app.screen-pad .block { margin: 0; }
#app.screen-pad .conv { padding: .95rem 1rem; }
#app.screen-pad .recap { margin: 0 0 .7rem; }