:root {
  color-scheme: light;
  --page: #f8faff;
  --surface: #ffffff;
  --surface2: #f6f8ff;
  --surface3: #f0f3fc;
  --text: #26364d;
  --text2: #6f809a;
  --subtle: #9eabc0;
  --border: #e8ecf5;
  --shade: rgba(39, 58, 91, .06);
  --blue: #8ec6ec;
  --lavender: #b8a6ed;
  --accent: #709dd0;
  --green: #5ccca7;
  --red: #df7784;
  --bubble: #f0f3ff;
  --self-bubble: #dceafd;
  --shadow: 0 12px 32px rgba(77, 101, 155, .055);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #141a29; --surface: #20283b; --surface2: #222d40; --surface3: #2a354a;
  --text: #e7eefe; --text2: #a8b9d1; --subtle: #8798b0; --border: #374158;
  --shade: rgba(0, 0, 0, .12); --accent: #a9c7fc; --bubble: #344058;
  --self-bubble: #37486f; --shadow: 0 12px 30px rgba(0,0,0,.13);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --page: #141a29; --surface: #20283b; --surface2: #222d40; --surface3: #2a354a;
    --text: #e7eefe; --text2: #a8b9d1; --subtle: #8798b0; --border: #374158;
    --shade: rgba(0, 0, 0, .12); --accent: #a9c7fc; --bubble: #344058;
    --self-bubble: #37486f; --shadow: 0 12px 30px rgba(0,0,0,.13);
  }
}
* { box-sizing: border-box; }
html,body { height:100%; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft Yahei",system-ui,sans-serif; background:var(--page); color:var(--text); -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; }
button { -webkit-tap-highlight-color:transparent; cursor:pointer; }
button:focus-visible,input:focus-visible,textarea:focus-visible { outline: 3px solid #9bbaef; outline-offset: 2px; }
button:disabled { cursor:not-allowed; opacity:.62; }
[hidden] { display:none !important; }
.app { height:100vh; height:100dvh; max-width:680px; margin:0 auto; background:var(--surface); display:flex; flex-direction:column; overflow:hidden; position:relative; box-shadow:0 0 44px rgba(55,80,125,.04); }
.topbar { min-height:75px; flex:none; padding:12px 20px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); background:var(--surface); position:relative; z-index:5; }
.brand { display:flex; gap:10px; align-items:center; font-size:23px; letter-spacing:.01em; }
.brand strong { font-weight:750; }
.logo { background:linear-gradient(145deg,#a0d4f7 0%, #b5b3f6 62%,#d9baf6 100%); border-radius:15px; box-shadow:0 5px 14px rgba(156,174,236,.21); width:39px; height:39px; display:grid; place-items:center; font-size:23px; font-weight:800; color:white; }
.connection { background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; gap:7px; color:var(--text2); font-size:12px; font-weight:600; padding:9px 11px; border-radius:100px; white-space:nowrap; min-height:34px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#e3c272; box-shadow:0 0 0 4px rgba(231,194,108,.11); flex:none; }
.connection.ready .status-dot { background:#70d3ab; box-shadow:0 0 0 4px rgba(90,202,158,.12); }
.connection.failed .status-dot { background:var(--red); box-shadow:0 0 0 4px rgba(223,119,132,.12); }
.refresh-icon { width:14px; height:14px; opacity:.7; }
.pages { flex:1; min-height:0; display:flex; position:relative; }
.view { display:none; min-height:0; min-width:0; width:100%; }
.view.active { display:flex; }
.chat-view { flex-direction:column; background:linear-gradient(180deg,var(--surface) 0%,var(--page) 84%); }
.chat-heading { display:flex; flex:none; align-items:center; justify-content:space-between; padding:19px 22px 16px; }
.chat-heading h1,.section-title { font-size:22px; font-weight:750; margin:0 0 5px; letter-spacing:.005em; }
.chat-heading span { color:var(--text2); font-size:13px; }
.chat-heading .online-pill { padding:7px 12px; border-radius:50px; background:var(--surface2); color:var(--text2); font-size:11px; border:1px solid var(--border); }
.chat-scroll { min-height:0; flex:1; padding:4px 16px 16px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.messages { display:flex; flex-direction:column; gap:16px; min-height:100%; justify-content:flex-end; }
.empty { margin:auto; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; color:var(--text2); padding:60px 8px 90px; text-align:center; }
.empty strong { color:var(--text); font-size:17px; font-weight:680; }
.empty span { font-size:13px; }
.empty-icon { width:68px; height:68px; display:grid; place-items:center; border-radius:25px; background:linear-gradient(140deg,#e6f4ff,#f1e8ff); color:#92a3d8; margin-bottom:10px; }
.empty-icon svg { width:30px; height:30px; }
.date-label { text-align:center; align-self:center; color:var(--subtle); font-size:11px; margin:8px 0 0; }
.message-row { display:flex; align-items:flex-start; gap:10px; width:100%; }
.message-row.mine { flex-direction:row-reverse; }
.avatar { width:35px; height:35px; border-radius:13px; flex:none; display:grid; place-items:center; font-size:15px; color:var(--avatar-ink); background:var(--avatar-bg); border:1px solid rgba(255,255,255,.55); box-shadow:0 3px 9px var(--shade); font-weight:700; }
.message-content { max-width:min(79%,410px); display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.message-row.mine .message-content { align-items:flex-end; }
.message-meta { display:flex; align-items:baseline; gap:8px; color:var(--text2); font-size:12px; padding:0 1px; }
.message-row.mine .message-meta { flex-direction:row-reverse; }
.message-meta .author { color:var(--text); font-weight:600; }
.message-meta time { font-size:11px; color:var(--subtle); }
.bubble { width:fit-content; max-width:100%; background:var(--bubble-color,var(--bubble)); border-radius:6px 16px 16px 16px; padding:10px 14px; color:var(--text); font-size:14px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; box-shadow:0 3px 12px rgba(75,95,142,.035); }
.message-row.mine .bubble { background:var(--self-bubble); border-radius:16px 6px 16px 16px; }
.composer-wrap { flex:none; padding:9px 15px 13px; background:var(--surface); border-top:1px solid var(--border); }
.composer { display:flex; align-items:flex-end; gap:10px; border-radius:20px; background:var(--surface2); border:1px solid var(--border); padding:7px 7px 7px 15px; transition:border-color .2s,box-shadow .2s; }
.composer:focus-within { border-color:#b4c6f2; box-shadow:0 0 0 3px rgba(164,192,240,.12); }
.composer textarea { width:100%; resize:none; border:0; outline:0; background:transparent; box-shadow:none; color:var(--text); padding:9px 0 8px; height:39px; max-height:112px; min-height:39px; font-size:14px; line-height:22px; overflow:auto; }
.composer textarea::placeholder { color:var(--subtle); }
.send-button { flex:none; display:grid; place-items:center; width:39px; height:39px; border:0; border-radius:14px; color:white; background:linear-gradient(135deg,#8cc8ec,#aaa9eb); box-shadow:0 4px 12px rgba(148,178,223,.25); }
.send-button svg { width:19px; height:19px; }
.compose-detail { min-height:18px; padding:7px 4px 0; color:var(--text2); font-size:11px; }
.tabbar { display:flex; flex:none; gap:12px; justify-content:center; padding:8px 18px calc(8px + env(safe-area-inset-bottom,0px)); background:var(--surface); border-top:1px solid var(--border); }
.tab { width:min(40%,170px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:transparent; color:var(--subtle); border-radius:18px; padding:9px 15px; font-size:12px; font-weight:650; transition:.18s ease; }
.tab.selected { color:#739fd4; background:linear-gradient(110deg,#e9f5ff 0%, #f1edff 100%); }
.tab svg { width:22px; height:22px; }
.profile-view { flex-direction:column; padding:25px 19px 35px; background:var(--page); overflow-y:auto; }
.section-title { margin:1px 3px 21px; font-size:25px; }
.profile-hero { border:1px solid var(--border); display:flex; align-items:center; gap:13px; border-radius:24px; padding:18px 17px; min-height:112px; background:linear-gradient(118deg,#edf7ff 0%,#f0eeff 60%,#f7eafd 100%); box-shadow:var(--shadow); color:#2e4160; }
.user-avatar { width:65px; height:65px; flex:none; border-radius:21px; display:grid; place-items:center; color:#6964ae; background:linear-gradient(140deg,#cde9ff,#d7c4fb); box-shadow:inset 0 1px 2px #fff,0 4px 14px rgba(137,137,214,.12); font-size:27px; font-weight:750; }
.user-avatar svg { width:32px; height:32px; }
.profile-identity { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.profile-identity strong { font-size:19px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-identity span { color:#75859f; font-size:12px; }
.profile-next { border:0; background:rgba(255,255,255,.7); border-radius:50%; width:31px; height:31px; flex:none; display:grid; place-items:center; color:#8697b5; }
.profile-next svg { width:17px; height:17px; }
.profile-stats { margin-top:12px; display:flex; align-items:center; border-radius:19px; background:var(--surface); border:1px solid var(--border); padding:16px 8px; }
.profile-stats > div:not(.stat-divider) { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; }
.profile-stats strong { font-size:16px; font-weight:750; }
.profile-stats span { font-size:11px; color:var(--text2); }
.profile-stats .stat-divider { width:1px; height:27px; background:var(--border); }
.menu-card { display:flex; flex-direction:column; border-radius:20px; border:1px solid var(--border); box-shadow:var(--shadow); background:var(--surface); margin-top:21px; overflow:hidden; padding:0 14px; }
.menu-card.secondary-menu { margin-top:13px; }
.menu-item { border:0; text-align:left; display:flex; align-items:center; gap:13px; background:transparent; min-height:63px; padding:9px 2px; color:var(--text); font-weight:600; font-size:14px; width:100%; }
.menu-item + .menu-item { border-top:1px solid var(--border); }
.menu-item:active { opacity:.64; }
.menu-icon { width:33px; height:33px; border-radius:11px; flex:none; display:grid; place-items:center; }
.menu-icon svg { width:18px; height:18px; }
.menu-icon.lavender { background:#eeeaff; color:#9890cd; }
.menu-icon.blue { background:#e6f3ff; color:#7ca7d2; }
.menu-icon.mint { background:#e3f8f0; color:#76b99d; }
.menu-icon.peach { background:#fff0e7; color:#d5a480; }
.menu-item .chevron { margin-left:auto; width:16px; height:16px; color:var(--subtle); }
.menu-trailing { margin-left:auto; color:var(--subtle); font-size:12px; font-weight:400; }
.menu-trailing + .chevron { margin-left:0; }
.logout-button { border:1px solid var(--border); background:var(--surface); color:var(--red); font-weight:600; border-radius:16px; padding:15px; margin-top:19px; }
.service-error { margin:10px 14px 0; flex:none; display:flex; align-items:center; gap:12px; border:1px solid rgba(223,119,132,.2); background:#fff1f0; color:#a94e5e; padding:10px 12px; border-radius:14px; z-index:3; }
.service-error > div { flex:1; min-width:0; }
.service-error strong { font-size:13px; }
.service-error p { font-size:11px; line-height:1.55; margin:3px 0 0; }
.service-error button { flex:none; background:white; color:#9a5566; border:0; padding:8px 12px; border-radius:10px; font-size:12px; }
.modal-shade { position:fixed; inset:0; z-index:100; background:rgba(30,42,64,.44); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; justify-content:center; align-items:flex-end; padding:12px; }
.auth-sheet,.info-sheet { width:min(100%,460px); border-radius:27px 27px 23px 23px; background:var(--surface); padding:9px 23px calc(24px + env(safe-area-inset-bottom,0px)); box-shadow:0 20px 70px rgba(25,45,76,.18); max-height:92dvh; overflow-y:auto; }
.sheet-handle { width:35px; height:4px; border-radius:4px; margin:2px auto 14px; background:var(--border); }
.sheet-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.sheet-heading h2 { margin:0; font-size:22px; font-weight:730; }
.icon-button { width:31px; height:31px; border:0; background:var(--surface3); border-radius:50%; color:var(--text2); }
.auth-switch { display:flex; gap:4px; padding:4px; background:var(--surface3); border-radius:15px; margin-bottom:23px; }
.auth-switch button { flex:1; border:0; border-radius:12px; padding:11px; color:var(--text2); background:transparent; font-size:14px; font-weight:620; }
.auth-switch button.active { color:var(--text); background:var(--surface); box-shadow:0 2px 9px var(--shade); }
#accountForm { display:flex; flex-direction:column; gap:10px; }
#accountForm label { font-size:13px; font-weight:650; margin-top:5px; }
#accountForm input { width:100%; border:1px solid var(--border); border-radius:14px; padding:15px 14px; background:var(--surface2); outline:0; color:var(--text); font-size:15px; }
#accountForm input:focus { border-color:#9fbaea; background:var(--surface); box-shadow:0 0 0 3px rgba(159,186,234,.1); }
.password-wrap { position:relative; }
.password-wrap input { padding-right:52px !important; }
.password-wrap button { position:absolute; top:50%; right:8px; transform:translateY(-50%); border:0; background:transparent; color:var(--text2); width:39px; height:39px; display:grid; place-items:center; }
.password-wrap svg { width:21px; height:21px; }
.form-note { font-size:12px; color:var(--text2); margin:0; }
.form-error { font-size:12px; color:var(--red); margin:1px 0; }
.primary-action { width:100%; margin-top:10px; border:0; border-radius:15px; padding:16px; font-size:15px; font-weight:720; color:white; background:linear-gradient(110deg,#8fc9ef,#aaa8ee); box-shadow:0 6px 18px rgba(145,166,220,.25); }
.info-content { color:var(--text2); font-size:14px; line-height:1.75; padding-bottom:16px; }
.info-content p { margin:3px 0 12px; }
.info-content .theme-options { display:flex; gap:9px; padding:7px 0; }
.info-content .theme-options button { border:1px solid var(--border); color:var(--text); background:var(--surface2); border-radius:12px; padding:12px 9px; flex:1; }
.info-content .theme-options button.chosen { border-color:#9fbfe9; color:var(--accent); background:var(--surface3); }
.toast { z-index:150; position:fixed; left:50%; bottom:calc(98px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,10px); width:max-content; max-width:min(90vw,400px); padding:12px 17px; background:rgba(49,64,87,.94); color:white; border-radius:14px; font-size:13px; line-height:1.5; opacity:0; visibility:hidden; transition:opacity .2s,transform .2s,visibility .2s; text-align:center; box-shadow:0 9px 28px rgba(33,42,70,.17); }
.toast.visible { opacity:1; transform:translate(-50%,0); visibility:visible; }
@media (min-width:640px) {
  body { background:linear-gradient(130deg,#eef5ff,#f8f4ff 55%,#e9f9f2); }
  .app { max-height:950px; margin:0 auto; box-shadow:0 0 80px rgba(72,87,134,.08); }
  .modal-shade { align-items:center; }
  .auth-sheet,.info-sheet { border-radius:26px; }
}
@media (max-width:350px) {
  .chat-heading { padding:15px 16px; }
  .topbar { padding-left:14px; padding-right:14px; }
  .profile-view { padding-left:13px; padding-right:13px; }
  .message-content { max-width:75%; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

html[data-theme="dark"] .message-row:not(.mine) .bubble { background:var(--bubble) !important; }
@media(prefers-color-scheme:dark){html:not([data-theme]) .message-row:not(.mine) .bubble{background:var(--bubble)!important}}

/* ---------------- 简言 V3 / responsive shell ---------------- */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow:hidden; }
html,body { width:100%; min-width:0; overscroll-behavior:none; }
body { overflow:hidden; }
button,textarea,input { min-width:0; }
.app { width:100%; height:100vh; height:100dvh; max-height:none; min-width:0; }
.pages,.view,.chat-scroll,.profile-view { min-width:0; }
.topbar { min-height:58px; height:58px; padding:8px 17px; }
.brand { gap:9px; font-size:20px; }
.logo { width:35px; height:35px; border-radius:12px; font-size:20px; }
.connection { min-height:31px; padding:7px 10px; font-size:11px; }
.tabbar { gap:4px; padding:3px 10px calc(3px + env(safe-area-inset-bottom,0px)); align-items:stretch; flex-wrap:nowrap; min-height:54px; }
.tab { width:33.3333%; flex:1 1 0; padding:4px 5px 5px; gap:3px; min-height:46px; border-radius:14px; font-size:10.5px; line-height:1.15; font-weight:650; transition:background-color .18s,color .18s; white-space:nowrap; }
.tab svg { width:19px; height:19px; flex:none; }
.tab.selected { background:linear-gradient(115deg,#e9f5ff,#efeafe); }
.chat-heading { padding:14px 16px 10px; }
.chat-heading h1 { font-size:19px; margin:0; }
.chat-scroll { padding:4px 12px 10px; }
.message-content { min-width:0; max-width:min(77%,410px); }
.message-row { gap:8px; }
.messages { gap:13px; }
.composer-wrap { padding:7px 12px 8px; }
.composer { border-radius:17px; padding:5px 6px 5px 13px; }
.composer textarea { font-size:16px; height:36px; min-height:36px; line-height:20px; padding:8px 0; }
.send-button { width:37px; height:37px; border-radius:13px; }
.profile-view { padding:19px 16px 25px; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; }
.section-title { margin:0 2px 15px; font-size:23px; }
.profile-hero { min-height:92px; padding:14px; border-radius:20px; }
.user-avatar { width:55px; height:55px; border-radius:17px; font-size:23px; }
.profile-identity strong { font-size:18px; }
.profile-stats { margin-top:10px; padding:11px 8px; border-radius:16px; }
.profile-stats strong { font-size:15px; }
.menu-card { margin-top:14px; border-radius:17px; padding:0 12px; }
.menu-card.secondary-menu { margin-top:10px; }
.menu-item { min-height:50px; font-size:13px; gap:11px; padding:7px 1px; }
.menu-icon { width:30px; height:30px; border-radius:10px; }
.menu-icon svg { width:17px; height:17px; }
.logout-button { margin-top:13px; padding:12px; font-size:13px; border-radius:14px; }
.toast { bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
.modal-shade { padding:0; padding-bottom:0; }
.auth-sheet,.info-sheet,.note-sheet { max-height:min(94dvh,750px); border-radius:25px 25px 0 0; padding:11px 20px calc(24px + env(safe-area-inset-bottom,0px)); }
@media(min-width:640px){
  .app { max-height:none; }
  .modal-shade { align-items:center; padding:16px; }
  .auth-sheet,.info-sheet,.note-sheet { border-radius:24px; }
}
@media(max-width:359px){
  .profile-view { padding-left:12px; padding-right:12px; }
  .profile-hero { padding:11px; gap:9px; }
  .user-avatar { width:48px; height:48px; }
  .profile-identity strong { font-size:16px; }
  .brand strong { font-size:18px; }
  .wall-add { padding:9px 11px !important; }
}

/* ---------------- Shared sticky-note wall ---------------- */
.wall-view { flex-direction:column; background:var(--surface); min-width:0; overflow:hidden; }
.wall-heading { flex:none; padding:15px 17px 9px; display:flex; gap:12px; justify-content:space-between; align-items:center; }
.wall-heading h1 { margin:0; font-size:20px; letter-spacing:.02em; font-weight:800; }
.wall-spark { color:#a5a2e1; font-size:16px; vertical-align:3px; }
.wall-heading p { margin:5px 0 0; font-size:11px; color:var(--text2); }
.wall-add { display:flex; align-items:center; gap:5px; background:linear-gradient(115deg,#8fc7ef,#adacec); border:0; color:white; border-radius:13px; padding:10px 13px; font-size:12px; font-weight:750; flex:none; box-shadow:0 3px 12px rgba(127,163,221,.21); }
.wall-add svg { width:16px; height:16px; }
.wall-toolbar { flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 17px 9px; gap:6px; color:var(--text2); font-size:10.5px; }
.wall-tools { display:flex; align-items:center; gap:8px; }
.wall-tools button { border:0; border-radius:8px; padding:6px 9px; background:var(--surface2); color:var(--text2); font-size:10.5px; }
.wall-viewport { flex:1 1 auto; min-height:0; min-width:0; overflow:auto; position:relative; scroll-behavior:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-x pan-y; background:#f9f7f1; }
.wall-viewport:focus-visible { outline:2px solid #a3b9ef; outline-offset:-2px; }
.wall-canvas { position:relative; width:3200px; height:2200px; min-width:3200px; min-height:2200px; background-color:#fbfaf5; background-image:radial-gradient(#d9d5ca 1px,transparent 1px),linear-gradient(115deg,rgba(235,244,255,.5),transparent 58%,rgba(250,231,239,.35)); background-size:25px 25px,100% 100%; }
.wall-canvas:before { content:''; position:absolute; inset:0; border:1px solid rgba(150,145,133,.15); pointer-events:none; }
.note-layer { position:absolute; inset:0; pointer-events:none; }
.wall-note { position:absolute; width:186px; min-height:158px; max-height:197px; padding:17px 15px 13px; border-radius:3px 19px 5px 14px; color:#334258; background:var(--note-color,#fff0b9); box-shadow:0 5px 12px rgba(89,81,59,.10),0 14px 27px rgba(105,100,86,.06),inset 0 1px 0 rgba(255,255,255,.58); transform:rotate(var(--note-rotate,0deg)); pointer-events:auto; display:flex; flex-direction:column; gap:10px; user-select:text; -webkit-user-select:text; border:1px solid rgba(255,255,255,.5); overflow:hidden; }
.wall-note:before { content:''; position:absolute; left:50%; top:0; width:45px; height:11px; transform:translate(-50%,-4px) rotate(-3deg); border-radius:3px; background:rgba(255,255,255,.58); box-shadow:0 1px 3px rgba(83,83,90,.03); pointer-events:none; }
.wall-note .note-content { font-size:13px; font-weight:610; line-height:1.62; overflow-wrap:anywhere; white-space:pre-wrap; flex:1; min-height:0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; line-clamp:6; }
.wall-note .note-bottom { display:flex; gap:4px; align-items:center; min-height:24px; }
.wall-note .note-avatar { width:22px; height:22px; flex:none; border-radius:7px; background:rgba(255,255,255,.6); color:#51637a; display:grid; place-items:center; font-size:11px; font-weight:800; }
.wall-note .note-author { font-size:10px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:85px; }
.wall-note .note-date { margin-left:auto; white-space:nowrap; font-size:9px; color:#758197; }
.wall-note .note-delete { position:absolute; right:6px; top:4px; width:24px; height:24px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.52); color:#747f8d; font-size:15px; opacity:0; transition:opacity .16s; }
.wall-note:hover .note-delete,.wall-note:focus-within .note-delete,.wall-note.own .note-delete { opacity:1; }
.wall-empty { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; gap:10px; text-align:center; align-items:center; padding:34px 32px; background:rgba(255,255,255,.78); border-radius:20px; box-shadow:0 6px 24px rgba(117,119,142,.06); color:#7c8aa4; white-space:nowrap; }
.wall-empty-icon { width:60px; height:60px; display:grid; place-items:center; background:#eae5ff; border-radius:23px; font-size:29px; color:#a49ddf; }
.wall-empty strong { color:#43516c; font-size:16px; }
.wall-empty span:last-child { font-size:12px; }
.wall-bottom-hint { flex:none; color:var(--subtle); background:var(--surface); text-align:center; padding:7px 0 8px; font-size:10px; }
.note-sheet { width:min(100%,460px); background:var(--surface); box-shadow:0 20px 70px rgba(25,45,76,.18); overflow-y:auto; }
#noteForm { display:flex; flex-direction:column; gap:16px; }
#noteText { background:linear-gradient(150deg,#fff7dd,#fff3ca); color:#38465e; border:1px solid rgba(196,175,119,.18); border-radius:15px; outline:0; width:100%; resize:none; padding:19px; font-size:16px; line-height:1.6; min-height:148px; max-height:230px; }
#noteText:focus { box-shadow:0 0 0 3px rgba(176,175,230,.2); }
#noteText::placeholder { color:#9d997f; }
.note-form-actions { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text2); }
.note-colors { display:flex; gap:8px; }
.note-color { width:28px; height:28px; border-radius:10px; border:2px solid transparent; background:var(--c); }
.note-color.selected { border-color:#7b92ca; box-shadow:0 0 0 2px var(--surface),0 0 0 3px rgba(117,145,210,.37); }
.note-sheet .primary-action { margin-top:2px; }
@media (hover:none) { .wall-note.own .note-delete { opacity:1; } }
@media (prefers-reduced-motion:reduce){ .wall-note,.tab,.wall-add { transition:none !important; } }


/* ========== 简言 V3.1：紧凑顶栏 / 沉浸式可缩放留言墙 ========== */
.topbar { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; padding:8px 14px; height:58px; min-height:58px; gap:8px; }
.brand { display:flex; align-items:center; width:38px; min-width:0; justify-self:start; }
.brand .logo { width:34px; height:34px; border-radius:12px; font-size:19px; }
.topbar-title { grid-column:2; margin:0; font-size:18px; line-height:1.25; font-weight:760; letter-spacing:.045em; text-align:center; transform:translateX(13px); white-space:nowrap; }
.connection { grid-column:3; justify-self:end; min-width:0; margin:0; }
.wall-view { background:var(--surface); position:relative; }
.wall-viewport { background:#f9f7f1; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; -webkit-overflow-scrolling:auto; }
.wall-viewport.panning { cursor:grabbing; }
.wall-stage { width:3200px; height:2200px; position:relative; overflow:visible; }
.wall-canvas { position:absolute; top:0; left:0; width:3200px; height:2200px; min-width:3200px; min-height:2200px; transform:scale(1); transform-origin:top left; will-change:transform; }
.wall-canvas { background-size:25px 25px,100% 100%; }
.wall-floating-top { position:absolute; top:0; left:0; right:0; width:100%; height:auto; z-index:12; display:flex; justify-content:space-between; padding:12px 13px 0; align-items:flex-start; pointer-events:none; }
.wall-floating-top > * { pointer-events:auto; }
.wall-meta { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding-top:3px; }
#wallCount { display:inline-flex; align-items:center; background:rgba(255,255,255,.9); color:#8993a5; box-shadow:0 3px 14px rgba(86,101,140,.07); border:1px solid rgba(226,229,240,.75); border-radius:12px; padding:7px 10px; font-size:11px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#wallMore { border:1px solid rgba(226,229,240,.75); border-radius:10px; background:rgba(255,255,255,.9); color:#8192b0; padding:7px 10px; font-size:11px; }
.wall-add { min-height:38px; border-radius:13px; padding:10px 13px; font-size:12px; box-shadow:0 4px 15px rgba(127,163,221,.26); }
.wall-add:active,.wall-zoom button:active { transform:scale(.96); }
.wall-zoom { position:absolute; bottom:13px; right:13px; margin:0; width:max-content; height:40px; display:flex; align-items:center; gap:1px; border-radius:14px; z-index:13; padding:3px; box-shadow:0 5px 20px rgba(57,72,98,.15); background:rgba(255,255,255,.91); border:1px solid rgba(227,233,244,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); pointer-events:auto; }
.wall-zoom button { min-height:33px; min-width:34px; padding:0 7px; border:0; border-radius:10px; background:transparent; color:#52688d; font-weight:680; font-size:17px; transition:background .15s,transform .15s; }
.wall-zoom button:hover { background:#eef1fb; }
#wallZoomValue { font-size:11px; min-width:44px; font-weight:720; font-variant-numeric:tabular-nums; }
.wall-zoom .wall-center { color:#8296b2; font-size:21px; border-left:1px solid #e4e9f2; border-radius:0 9px 9px 0; }
.wall-first-hint { position:absolute; top:50%; left:50%; width:max-content; max-width:85vw; margin:0; padding:12px 20px; border-radius:100px; background:rgba(45,61,88,.88); color:#fff; font-size:12px; line-height:1.5; z-index:14; pointer-events:none; text-align:center; box-shadow:0 10px 28px rgba(39,49,72,.16); opacity:0; transform:translate(-50%,8px); transition:opacity .45s ease,transform .45s ease; }
.wall-first-hint.show { opacity:1; transform:translate(-50%,0); }
.wall-first-hint.fade { opacity:0; transform:translate(-50%,-8px); }
.wall-note { -webkit-user-select:none; user-select:none; }
.chat-heading { justify-content:flex-end; padding:8px 15px 3px; min-height:30px; }
.chat-heading .online-pill { padding:5px 10px; font-size:10.5px; }
.profile-view { padding-top:15px; }
/* Telegram-like outgoing bubble flight; never claim official Telegram effects. */
.message-row.is-pending .bubble { opacity:.8; }
.message-row .bubble.send-landing { opacity:0; }
.send-flight { position:fixed; z-index:90; color:var(--text); background:var(--self-bubble); border-radius:16px 6px 16px 16px; padding:10px 14px; font-size:14px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; box-shadow:0 9px 20px rgba(98,147,206,.18); pointer-events:none; overflow:hidden; transform-origin:100% 100%; }
.send-button.sending-burst svg { animation:jy-plane-pop .36s cubic-bezier(.15,.87,.22,1); }
@keyframes jy-plane-pop { 0%{transform:translate(0,0) rotate(0) scale(1);opacity:1} 48%{transform:translate(6px,-7px) rotate(12deg) scale(.75);opacity:.42} 52%{transform:translate(-3px,5px) rotate(-10deg) scale(.6);opacity:.25} 100%{transform:none;opacity:1} }
@media(prefers-reduced-motion:reduce){ .wall-first-hint { transition:none; } .send-button.sending-burst svg { animation:none; } }
@media(max-width:370px) { .topbar { padding-left:11px; padding-right:11px; } .topbar-title { transform:translateX(10px); font-size:17px; } .wall-add { padding:9px 10px; } .wall-meta #wallCount { font-size:10px; } .wall-zoom { margin-right:9px; } }

/* Center section title relative to the viewport, independent of the sync-pill width. */
.topbar { display:flex; align-items:center; justify-content:space-between; }
.topbar-title { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; }
@media(max-width:370px){.topbar-title{transform:translate(-50%,-50%);}}