*{box-sizing:border-box}
:root{--ink:#17333c;--muted:#5d737b;--line:#dbe5e3;--paper:#f2f5f2;--brand:#135b55;--card:#fff}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.tiny{font-size:12px;color:var(--muted)}
.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--brand);font-weight:700;margin:0 0 6px}

/* lock */
.lock-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.lock-card{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 24px;box-shadow:0 20px 60px rgba(20,50,50,.08)}
.lock-card h1{font-size:26px;margin:0 0 8px}
.lock-card p{margin:0 0 14px}
.lock-card input{width:100%;height:48px;border:1px solid var(--line);border-radius:12px;padding:0 14px;background:#fbfcfb;outline:none}
.lock-card input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(19,91,85,.12)}
.primary{background:var(--brand);color:#fff;border:0;border-radius:12px;padding:12px 18px;font-weight:650;min-height:46px}
.primary:active{opacity:.85}
.primary:disabled{opacity:.5}
.lock-card .primary{width:100%;margin-top:12px}
.msg{color:#a33b21;font-size:13px;min-height:18px;margin:8px 0 0}
.ghost{background:transparent;border:1px solid transparent;color:var(--muted);padding:6px 10px;border-radius:9px;font-size:13px}
.ghost:hover{background:#e9efec;color:var(--ink)}

/* room */
.room{height:100%;display:flex;flex-direction:column;max-width:760px;margin:0 auto;background:#fff;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:5}
.topbar strong{display:block;font-size:16px;line-height:1.3}
.topbar .sub{font-size:12px;color:var(--muted)}
.top-actions{display:flex;gap:2px}

.people{display:flex;gap:8px;padding:10px 14px;overflow-x:auto;border-bottom:1px solid var(--line);background:#fbfcfb}
.person{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;border:1px solid var(--line);border-radius:20px;padding:4px 10px 4px 4px;background:#fff}
.person .dot{width:22px;height:22px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.person.off{opacity:.45}

.feed{flex:1;overflow-y:auto;padding:16px 14px 8px;scroll-behavior:smooth}
.intro-card{background:#f6faf7;border:1px solid #d9e7de;border-radius:14px;padding:14px 16px;margin-bottom:18px}
.intro-card p{margin:6px 0 0;font-size:13px;color:var(--muted)}

.row{display:flex;gap:9px;margin:0 0 16px;align-items:flex-start}
.row.me{flex-direction:row-reverse}
.avatar{width:32px;height:32px;border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.who{font-size:11px;color:var(--muted);margin:0 0 3px 2px}
.bubble{max-width:82%;background:#f1f4f2;border-radius:14px;padding:10px 13px;font-size:15px;line-height:1.7;white-space:pre-wrap;word-break:break-word;border:1px solid #e6ece9}
.row.me .bubble{background:var(--brand);color:#fff;border-color:var(--brand)}
.row.me .who{text-align:right;margin-right:2px}
.bubble.typing{color:var(--muted);font-size:13px}

.composer{border-top:1px solid var(--line);padding:8px 12px calc(10px + env(safe-area-inset-bottom));background:#fff}
.mentions{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px}
.mentions button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:4px 10px;font-size:12px;color:var(--muted);white-space:nowrap}
.input-row{display:flex;gap:8px;align-items:flex-end}
textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:14px;padding:10px 12px;max-height:120px;outline:none;background:#fbfcfb;font-size:15px;line-height:1.5}
textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(19,91,85,.1)}
.input-row .primary{padding:10px 16px;min-height:44px}
.status{font-size:11px;color:var(--muted);margin:6px 2px 0;min-height:15px}

@media(min-width:761px){.room{height:100vh}.feed{padding:20px 22px 8px}.bubble{max-width:76%}}

/* v1: 群聊节奏 */
.person .online{width:6px;height:6px;border-radius:50%;background:#3fa06a;display:inline-block;margin-right:5px}
.body{min-width:0;max-width:82%}
.row .who{display:flex;align-items:center;gap:2px}
.row .who .role{color:#98a7a3;font-size:10px}
.row .who .time{margin-left:7px;color:#a6b2ae;font-size:10px;font-weight:400}
.row.me .body{max-width:82%}
.bubble.typing{color:#8b9a96;font-style:normal}
.bubble.typing:after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"·"}50%{content:"··"}75%{content:"···"}}

/* v2: 引用回复与消息分组 */
.replybar{display:flex;align-items:center;gap:8px;background:#eef4f1;border-left:3px solid #135b55;border-radius:8px;padding:6px 10px;margin:0 0 8px;font-size:12px;color:#4e6660}
.replybar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.replybar button{border:0;background:transparent;color:#7b8f89;font-size:18px;line-height:1;padding:0 2px}
.bubble .quote{border-left:2px solid rgba(19,91,85,.35);padding:2px 8px;margin:0 0 5px;font-size:12px;color:#6c817b;background:rgba(19,91,85,.05);border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.row.me .bubble .quote{border-left-color:rgba(255,255,255,.5);color:#d9ebe6;background:rgba(255,255,255,.12)}
.row.cont{margin-top:-9px}
.row.cont .avatar{visibility:hidden;height:0;margin-top:-2px}
.row.cont .who{display:none}
.row .body{cursor:pointer}

/* v3: 群聊纹理 */
.dayline{text-align:center;font-size:11px;color:#9aa8a4;margin:6px 0 14px}
.receipt{font-size:10px;color:#9aa8a4;text-align:right;margin:2px 3px 0}
.row .bubble .at{color:#135b55;font-weight:650}
.row.me .bubble .at{color:#d8fff4;font-weight:650}
.more{border:0;background:transparent;color:#5d8f84;font-size:12px;padding:2px 0;display:block;margin-top:2px}
.row.me .more{color:#cfeee6}