:root {
    --green: #07c160;
    --green-press: #06ae56;
    --bubble: #95ec69;
    --bg: #f5f5f5;
    --text: #000000;
    --sub: #888888;
    --line: #e5e5e5;
    --bar: #f7f7f7;
    --input-bg: #f7f7f7;
    --link: #576b95;
    --danger: #fa5151;
    /* 按下未松手时的浅灰底，松手即恢复 */
    --press: rgba(0, 0, 0, 0.08);
    --press-row: #ececec;
    --phone-width: 390px;
    /* 底部：系统 env；安卓壳沉浸式 env=0 时由 safe-area.js / 壳写入 --sab-bridge（三键约 48，手势约 16～24） */
    --safe-bottom: max(20px, env(safe-area-inset-bottom, 0px), var(--sab-bridge, 0px));
    /* 顶栏：env 优先；安卓壳沉浸式但 env=0 时由 safe-area.js / 壳写入 --sat-bridge */
    --safe-top: max(env(safe-area-inset-top, 0px), var(--sat-bridge, 0px));
    color-scheme: light;
}

/* 跨文档 View Transition 已关闭：安卓 WebView 会拖住底栏切页首屏 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    font-size: 16px;
}

.phone {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    margin: 0 auto;
    background: var(--bg);
}

@media (min-width: 768px) {
    html, body { background: #2b2b2b; }
    .phone {
        width: var(--phone-width);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
}

button, input { font: inherit; color: inherit; }
a { color: inherit; }
button { cursor: pointer; }

.navbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(44px + var(--safe-top));
    padding-top: var(--safe-top);
    background: var(--bg);
}

.navbar h1 a,
.title-link {
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
}
.navbar h1 a:active,
.title-link:active {
    background: var(--press);
}

.navbar h1 {
    margin: 0;
    max-width: 70%;
    overflow: hidden;
    color: #000;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.navbar h1 .title-with-marks {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    vertical-align: middle;
}
.navbar h1 .title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.typing-hint {
    color: var(--sub);
    font-size: 13px;
    font-weight: 400;
}

button.nav-plus { border: 0; background: transparent; padding: 0; }

.plus-menu {
    position: absolute;
    top: calc(var(--safe-top) + 40px);
    right: 13px;
    z-index: 8;
    min-width: 156px;
    background: #4c4c4c;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.plus-caret {
    position: absolute;
    top: -6px;
    right: 21px;
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent #4c4c4c;
}

.plus-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.plus-menu svg { width: 22px; height: 22px; flex: none; }

.plus-menu a + a { border-top: 0.5px solid rgba(255, 255, 255, 0.12); }
.plus-menu a:active { background: rgba(255, 255, 255, 0.08); }

.back, .nav-plus {
    position: absolute;
    top: calc(var(--safe-top) + 2px);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    text-decoration: none;
    border-radius: 6px;
    background: transparent;
}

/* 安卓贴边难点：返回右移、右侧图标左移，并略放大返回箭头 */
.back { left: 9px; }
.nav-plus { right: 11px; }
.nav-text {
    position: absolute;
    right: 15px;
    top: calc(var(--safe-top) + 10px);
    color: var(--text);
    font-size: 15px;
    text-decoration: none;
    line-height: 24px;
}
.nav-text:active { opacity: 0.6; }
.back svg { width: 26px; height: 26px; }
.nav-plus svg { width: 22px; height: 22px; }
.back:active, .nav-plus:active { background: var(--press); }

.screen { min-height: 100dvh; padding-bottom: calc(50px + var(--safe-bottom)); }
.me { padding-top: var(--safe-top); }

.tabbar {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 6;
    width: 100%;
    transform: translateX(-50%);
    display: flex;
    height: calc(50px + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--bar);
    border-top: 0.5px solid #d6d6d6;
}

.tabbar a {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-decoration: none;
    color: #181818;
    background: transparent;
}

.tabbar a.active { color: var(--green); }
.tabbar a:not(.active) { color: #181818; }
.tabbar a:active { background: var(--press); }
.tabbar svg {
    display: block;
    width: 26px;
    height: 26px;
    flex: none;
}
.tabbar span {
    display: block;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
}

.badge, .count {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--danger);
    color: #fff;
    font-style: normal;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
}

.badge {
    position: absolute;
    top: 2px;
    left: calc(50% + 4px);
}
.badge-dot {
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
}
.menu-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.menu-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
}

.search {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin: 0 8px 10px;
    background: #fff;
    border-radius: 6px;
    color: #b2b2b2;
}

.search-fake {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    pointer-events: none;
}

.search svg { width: 16px; height: 16px; flex: none; }

.search input {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    padding: 0 12px;
    background: transparent;
    font-size: 16px;
    opacity: 0;
}

.search.open .search-fake,
.search:focus-within .search-fake { visibility: hidden; }
.search.open input,
.search:focus-within input { opacity: 1; }

.cells { list-style: none; margin: 0; padding: 0; background: #fff; }

.swipe-row {
    position: relative;
    overflow: hidden;
    background: #fff;
    /* 屏外会话行跳过绘制，首屏更快 */
    content-visibility: auto;
    contain-intrinsic-size: auto 72px;
}

.swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

.swipe-pin,
.swipe-delete {
    width: 76px;
    border: 0;
    color: #fff;
    font-size: 16px;
}

.swipe-pin { background: #c8c7cc; }
.swipe-delete { background: #fa5151; }

.swipe-row .chat-cell {
    position: relative;
    z-index: 1;
    background: #fff;
    transform: translateX(0);
    transition: transform 0.16s ease;
}

.swipe-row.pinned .chat-cell { background: var(--bg); }

a.entry { color: inherit; }

.chat-cell, .entry, .request {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 72px;
    padding: 0 16px;
    border: 0;
    background: #fff;
    text-align: left;
    text-decoration: none;
}

.chat-cell:active, .entry:active, .request:active { background: var(--press-row); }

.meta {
    flex: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 12px 0;
    border-bottom: 0.5px solid var(--line);
}

.cells li:last-child .meta { border-bottom: 0; }

.line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}
.line strong, .meta strong { color: #000; font-size: 17px; font-weight: 400; }
.title-wrap strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.name-with-marks {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
}
.name-with-marks > strong,
.name-with-marks > span:first-child {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.group-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 0.5px solid #b2b2b2;
    border-radius: 2px;
    color: #888;
    font-style: normal;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}
.line time, .preview { color: var(--sub); }
.line time { flex: none; font-size: 12px; }
.subline { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.preview {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--sub);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.unread {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    flex: none;
    border-radius: 9px;
    background: #fa5151;
    color: #fff;
    font-style: normal;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.avatar {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}

.avatar.sm { width: 40px; height: 40px; font-size: 16px; }
.avatar.lg { width: 64px; height: 64px; margin: 0; border-radius: 6px; font-size: 28px; }
.avatar.xl { width: 64px; height: 64px; margin: 0; border-radius: 8px; font-size: 28px; }
img.avatar { display: block; object-fit: cover; }
.avatar-0 { background: #07c160; }
.avatar-1 { background: #3d6db5; }
.avatar-2 { background: #fa9d3b; }
.avatar-3 { background: #e75e58; }
.avatar-4 { background: #6467f0; }

.contacts .chat-cell, .contacts .entry, .contacts .request { min-height: 56px; }
.contacts .cells > li {
    content-visibility: auto;
    contain-intrinsic-size: auto 56px;
}
.contacts .letter {
    content-visibility: auto;
    contain-intrinsic-size: auto 28px;
}
.contacts .meta {
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}
.contacts .name-with-marks {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
}

.mark {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: var(--green);
    font-size: 22px;
}

.mark.person { background: #fa9d3b; }
.mark svg { width: 24px; height: 24px; }

.add-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px 16px;
    background: #fff;
}

.add-row .mark { margin: 0; }
.add-row input {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: 0;
    background: var(--bg);
    border-radius: 4px;
    padding: 0 10px;
    font-size: 16px;
}

.add-row button, .request button {
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: var(--green);
    color: #fff;
    font-size: 14px;
}

.request button.ghost { background: transparent; color: #333; }
.request form,
.request-actions { display: flex; gap: 2px; flex: none; }
.request-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.request-main .meta { padding-right: 8px; }
.count { margin-left: 8px; }

.letter {
    margin: 0;
    padding: 3px 16px;
    color: #888;
    font-size: 13px;
    font-weight: 500;
}

.index {
    position: fixed;
    right: 1px;
    top: 46%;
    z-index: 4;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.index a {
    padding: 1px 5px;
    color: #555;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.profile {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    margin: 0 0 12px;
    padding: 48px 20px 32px;
    border: 0;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.profile strong { display: block; font-size: 22px; font-weight: 600; }
.profile-meta { min-width: 0; flex: 1; }
.profile-account {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-all;
}
.profile-account.account-none { color: var(--sub); }
.profile-account.account-vip { color: #e64340; font-weight: 500; }
.profile-account.account-svip { color: #6d28d9; font-weight: 600; }
.vip-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.04em;
    vertical-align: 1px;
}
.account-vip .vip-tag {
    background: rgba(230, 67, 64, 0.12);
    color: #e64340;
}
.account-svip .vip-tag {
    background: rgba(109, 40, 217, 0.14);
    color: #6d28d9;
    box-shadow: inset 0 0 0 0.5px rgba(245, 158, 11, 0.55);
}
.profile-vip-until {
    margin: 5px 0 0;
    color: var(--sub);
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.logout {
    display: block;
    width: calc(100% - 32px);
    height: 56px;
    margin: 12px 16px 0;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 17px;
}

.logout:active { background: var(--press-row); }

.empty {
    margin: 0;
    padding: 72px 16px;
    text-align: center;
    color: var(--sub);
    font-size: 14px;
}

.auth {
    min-height: 100dvh;
    padding: calc(64px + var(--safe-top)) 32px 32px;
    background: #fff;
}

.auth h1 { margin: 0 0 28px; font-size: 22px; font-weight: 600; }

.auth input {
    display: block;
    width: 100%;
    height: 52px;
    border: 0;
    border-bottom: 0.5px solid var(--line);
    background: transparent;
    font-size: 17px;
    color: var(--text);
}
.auth input:focus { outline: none; }

/* 注册页：图标 + 浮动标签 + 底部分割线（对齐演示排版） */
.auth-register h1 {
    text-align: center;
    font-weight: 500;
}
.auth-field {
    margin: 0 0 22px;
}
.auth-field-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1.5px solid var(--line);
    padding: 10px 0 6px;
    transition: border-color 0.2s;
}
.auth-field-row.focus {
    border-bottom-color: var(--green);
}
.auth-field-row.error {
    border-bottom-color: var(--danger);
}
.auth-field-icon {
    flex: none;
    color: var(--sub);
}
.auth-field-inner {
    position: relative;
    flex: 1;
    min-width: 0;
}
.auth-register .auth-field-inner input {
    height: 40px;
    border: 0;
    border-bottom: 0;
    padding: 10px 0 6px;
    font-size: 16px;
}
.auth-float {
    position: absolute;
    left: 0;
    top: 10px;
    color: var(--sub);
    font-size: 16px;
    line-height: 1.2;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.2s, color 0.2s, top 0.2s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.auth-float.active {
    top: -6px;
    transform: scale(0.75);
    color: var(--green);
}
/* 眼睛与左侧图标同在一行 flex 居中，避免绝对定位错位 */
.auth-register button.auth-eye {
    position: static;
    transform: none;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sub);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    align-self: center;
}
.auth-register button.auth-eye:active {
    background: transparent;
    color: var(--text);
}
.auth-register button.auth-eye svg[hidden] {
    display: none;
}
.auth-strength {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--sub);
    line-height: 1.55;
}
.auth-strength-item.pass {
    color: var(--green);
}
.auth-register .captcha-row {
    margin-top: 0;
    width: 100%;
}
.auth-register .captcha-row #captcha-q {
    flex: none;
    color: var(--text);
    font-size: 16px;
}
.auth-register .captcha-row input {
    height: 40px;
    border: 0;
    padding: 6px 0;
}

.auth .field-error {
    margin: 8px 0 0;
    color: #fa5151;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
}
.auth .field-error[hidden] { display: none; }
.auth .field-ok {
    margin: 8px 0 0;
    color: #07c160;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
}
.auth .field-ok[hidden] { display: none; }
.auth .captcha-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 16px;
    color: var(--text);
}
.auth .captcha-row input {
    flex: 1;
    width: auto;
    min-width: 0;
}
.auth .captcha-hint {
    margin: 6px 0 0;
    color: var(--sub);
    font-size: 13px;
}
.auth-tip-title {
    margin: 10px 0 0;
    color: var(--sub);
    font-size: 13px;
    line-height: 1.55;
}
.auth-tip {
    margin: 4px 0 4px;
    padding: 0 0 0 1.2em;
    color: var(--sub);
    font-size: 13px;
    line-height: 1.55;
    list-style: decimal;
}
.auth-tip li { margin: 0; padding: 0; }

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--sub);
    font-size: 13px;
    line-height: 1.55;
    cursor: pointer;
    user-select: none;
}
.auth-remember input {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    flex: none;
}

.auth button {
    width: 100%;
    height: 48px;
    margin-top: 36px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 17px;
    font-weight: 500;
}

.auth button:active { background: var(--green-press); }
.auth.kicked {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.auth.kicked form { width: 100%; }
.kicked-tip {
    margin: 24px 0 0;
    color: #111;
    font-size: 20px;
    font-weight: 600;
}
.kicked-sub {
    margin: 8px 0 0;
    color: #888;
    font-size: 14px;
}
.kicked-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 36px 0 20px;
}
.kicked-avatar {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    background: #d8d8d8;
}
.kicked-card strong { font-size: 18px; font-weight: 600; }
.kicked-id { color: #888; font-size: 14px; }
.switch { margin-top: 22px; text-align: center; }
.switch a { color: #576b95; font-size: 14px; text-decoration: none; }
.error { margin: 0 0 8px; color: #fa5151; font-size: 14px; }
/* 顶栏红条仅作无 JS 兜底；有 toast.js 时会隐藏并改中央黑底提示 */
.error.bar { padding: 8px 16px; background: #fff7f7; }
.error.bar[hidden] { display: none !important; }

.toast {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 30;
    max-width: 70%;
    margin: 0;
    padding: 12px 16px;
    border-radius: 8px;
    background: #000;
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.danger-cell {
    color: var(--danger);
    font-size: 16px;
    justify-content: center;
    width: 100%;
    border: 0;
    cursor: pointer;
}

.toast.fade { opacity: 0; }
.toast.moment-publish-progress {
    z-index: 200;
    min-width: 88px;
    padding: 16px 22px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.04em;
    pointer-events: none;
}
.toast.moment-publish-progress[hidden] {
    display: none !important;
}

.confirm-mask {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

.confirm-mask[hidden] { display: none !important; }

.confirm-box {
    width: min(280px, calc(100% - 64px));
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

.confirm-box p {
    margin: 0;
    padding: 28px 20px 22px;
    color: #191919;
    font-size: 16px;
    line-height: 1.5;
    word-break: break-word;
}
/* 商城升级说明较长，略加宽 */
#shop-confirm .confirm-box {
    width: min(320px, calc(100% - 48px));
}
#shop-confirm .confirm-box p {
    font-size: 15px;
    text-align: left;
}

.confirm-actions {
    display: flex;
    border-top: 0.5px solid #e5e5e5;
}

.confirm-actions button {
    flex: 1;
    height: 48px;
    border: 0;
    background: #fff;
    font-size: 17px;
}

.confirm-cancel { color: #191919; }
.confirm-ok { color: #fa5151; border-left: 0.5px solid #e5e5e5; }
/* 微信普通确认（购买等）：蓝字；删除类危险操作用上面的红字 */
.confirm-ok.confirm-buy { color: #576b95; }

.thread {
    /* svh：不随地址栏显隐变化，避免进对话后输入栏上跳；键盘弹出时由 JS 按 visualViewport 改 height */
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
    /* 空会话下拉橡皮筋易带动整页，连带误触 visualViewport 适配 */
    overscroll-behavior-y: none;
}

#boot-shell {
    position: fixed;
    inset: 0;
    z-index: 40;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    min-height: 0;
    margin: 0;
    background: var(--bg);
}

html.boot-open,
html.boot-open body {
    overflow: hidden;
}

@media (min-width: 768px) {
    #boot-shell {
        left: 50%;
        width: var(--phone-width);
        transform: translateX(-50%);
    }
}

.link-status {
    margin: 0;
    padding: 2px 12px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sub);
    line-height: 0;
}
.link-status[hidden] {
    display: none !important;
}
.link-status .msg-state-spin {
    display: block;
    width: 16px;
    height: 16px;
}

.boot-log { flex: 1; }

.boot-input {
    flex: 1;
    height: 40px;
    border-radius: 6px;
    background: #fff;
}

/* 从私聊返回消息：过渡壳是消息页骨架，转圈相对视口正中 */
#boot-shell.inbox-boot {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    background: var(--bg);
}
.inbox-boot-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sub);
}
.inbox-boot-body .msg-state-spin {
    width: 28px;
    height: 28px;
}

/* 消息列表已露出时：固定铺满视口再居中，避免列表很长时转圈沉到底 */
#inbox-reconnect {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 245, 245, 0.55);
    color: var(--sub);
}
#inbox-reconnect[hidden] {
    display: none !important;
}
#inbox-reconnect .msg-state-spin {
    width: 28px;
    height: 28px;
}
@media (min-width: 768px) {
    #inbox-reconnect {
        left: 50%;
        right: auto;
        width: var(--phone-width);
        transform: translateX(-50%);
    }
}

#messages {
    flex: 1;
    overflow-y: scroll;
    padding: 8px 0 12px;
    scrollbar-width: none;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

#messages.has-support-intro {
    display: flex;
    flex-direction: column;
}

#messages::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

.support-intro {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 28px;
    text-align: center;
    color: var(--sub);
    font-size: 13px;
    line-height: 1.7;
    pointer-events: none;
    user-select: none;
}

.support-intro[hidden] {
    display: none !important;
}

.support-intro p {
    margin: 0;
}

.scroll-thumb {
    position: absolute;
    right: 2px;
    z-index: 3;
    width: 3px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.scroll-thumb.show {
    opacity: 1;
    transition: none;
}

.stamp {
    display: table;
    margin: 12px auto 6px;
    padding: 2px 6px;
    border-radius: 3px;
    background: #dadada;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
}

.msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0;
    padding: 0 12px;
    -webkit-touch-callout: none;
}

.msg.mine { flex-direction: row-reverse; }
.msg.pending { opacity: 1; }

/* Telegram 式发送状态：气泡旁转圈 / 单勾 / 双勾（原「已读」位置） */
.msg-state,
.receipt {
    align-self: flex-end;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0 2px 2px 0;
    color: #b2b2b2;
    line-height: 0;
}
.msg-state svg {
    display: block;
    width: 14px;
    height: 14px;
}
.msg-state.is-read {
    width: 18px;
}
.msg-state.is-read svg {
    width: 16px;
    height: 14px;
}
.msg-state.is-sending {
    color: var(--sub);
}
.msg-state-spin {
    animation: msg-state-spin 0.85s linear infinite;
}
@keyframes msg-state-spin {
    to { transform: rotate(360deg); }
}
.msg .avatar { margin: 0; }
.msg .avatar-link {
    display: flex;
    flex: none;
    color: inherit;
    text-decoration: none;
}
.msg .avatar-link:active { opacity: 0.75; }

.friend-card {
    background: var(--bg);
}
.friend-card-nav h1 {
    visibility: hidden;
}
.friend-card .card-page {
    margin-top: 12px;
    padding-bottom: 8px;
}
.friend-card-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    padding: 20px 16px 22px;
    background: #fff;
    border-bottom: 0.5px solid var(--line);
    text-align: left;
}
.friend-card-head .avatar.xl { flex: none; }
.friend-card-meta { min-width: 0; flex: 1; padding-top: 2px; }
.friend-card-meta h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
}
.friend-card-line {
    margin: 6px 0 0;
    color: var(--sub);
    font-size: 14px;
    line-height: 1.4;
}
/* 商家标记：对齐 vip-badge 外框，字号与账号灰字同为 14px */
.merchant-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0 5px;
    min-height: 20px;
    border: 0.5px solid var(--green);
    border-radius: 2px;
    color: var(--green);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.3;
    vertical-align: middle;
}
/* 资料页账号下方：与 VIP 上下叠放时才需要上间距 */
.friend-card-meta > .merchant-badge,
.profile-meta > .merchant-badge,
.card-profile-meta > .merchant-badge {
    margin-top: 5px;
}
.friend-card-menu {
    margin-top: 12px;
}
.friend-card-menu .menu-cell {
    min-height: 56px;
}
.friend-cell-label {
    flex: none;
    min-width: 4.5em;
}
.friend-tag-cell .friend-tag-values {
    flex: 1;
    min-width: 0;
    margin-right: 4px;
    color: var(--sub);
    font-size: 15px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.friend-card-menu .friend-moments-cell {
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.friend-moments-cell .friend-cell-label {
    flex: none;
    line-height: 44px;
}
.friend-album {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    max-width: calc(100% - 5.5em);
    margin: 0 0 0 auto;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}
.friend-album img {
    display: block;
    width: 44px;
    height: 44px;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
    border-radius: 2px;
    background: #eee;
    vertical-align: middle;
}
.friend-album-empty {
    flex: 1;
    min-width: 0;
    margin-left: 0;
    color: var(--sub);
    font-size: 14px;
    line-height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.friend-msg-form {
    margin: 12px 16px 0;
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}
.friend-msg-form .friend-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #576b95;
    font-size: 17px;
}
.friend-msg-form .friend-msg svg {
    width: 22px;
    height: 22px;
    flex: none;
}
.friend-msg-form .friend-msg:active {
    background: var(--press-row);
}
.moments-page { background: #fff; }
/* 有顶部广告：banner 正常流；顶栏 fixed（安卓 WebView 里 sticky 常失效，一滑就整条跑掉） */
.moments-page.has-banner .moments-cover {
    position: relative;
}
.moments-page.has-banner .moments-cover > .moment-banner {
    margin: 0;
    width: 100%;
}
.moments-page.has-banner .moments-cover > .navbar.moments-nav {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    width: 100%;
    max-width: var(--phone-width);
    margin: 0;
    background: rgba(255, 255, 255, var(--moments-nav-bg, 0));
    border-bottom-color: rgba(229, 229, 229, var(--moments-nav-bg, 0));
    color: #fff;
    transition: color 0.15s ease, background 0.15s ease;
}
@media (max-width: 767px) {
    .moments-page.has-banner .moments-cover > .navbar.moments-nav {
        left: 0;
        right: 0;
        transform: none;
        max-width: none;
    }
}
.moments-page.has-banner .moments-cover > .navbar.moments-nav h1 {
    color: inherit;
}
.moments-page.has-banner .moments-cover > .navbar.moments-nav .back,
.moments-page.has-banner .moments-cover > .navbar.moments-nav .nav-plus {
    color: inherit;
}
.moments-page.has-banner .moments-cover > .navbar.moments-nav:not(.is-solid) .back,
.moments-page.has-banner .moments-cover > .navbar.moments-nav:not(.is-solid) .nav-plus,
.moments-page.has-banner .moments-cover > .navbar.moments-nav:not(.is-solid) h1 {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.moments-page.has-banner .moments-cover > .navbar.moments-nav.is-solid {
    color: #111;
}
.moments-page.has-banner .moments-cover > .navbar.moments-nav.is-solid h1 {
    color: #000;
}
.moments-page.has-banner .moments-cover > .navbar.moments-nav.is-solid .back,
.moments-page.has-banner .moments-cover > .navbar.moments-nav.is-solid .nav-plus {
    filter: none;
}
/*
 * 安卓 App 壳：顶栏固定白底（不透明叠 banner），banner 整块在导航下方。
 * 沉浸式 + safe-area 为 0 时，透明顶栏会与图字重叠；iOS / 系统浏览器仍用透明渐显。
 */
html.android-wv .moments-page.has-banner .moments-cover {
    padding-top: calc(44px + var(--safe-top));
}
html.android-wv .moments-page.has-banner .moments-cover > .navbar.moments-nav,
html.android-wv .subpage.moments-page.has-banner .moments-cover > .navbar.moments-nav {
    background: #fff;
    border-bottom: 0.5px solid var(--line);
    border-bottom-color: var(--line);
    color: #111;
}
html.android-wv .moments-page.has-banner .moments-cover > .navbar.moments-nav h1 {
    color: #000;
}
html.android-wv .moments-page.has-banner .moments-cover > .navbar.moments-nav .back,
html.android-wv .moments-page.has-banner .moments-cover > .navbar.moments-nav .nav-plus {
    color: #111;
    filter: none;
}
html.android-wv .moments-page.has-banner .moments-cover > .navbar.moments-nav:not(.is-solid) .back,
html.android-wv .moments-page.has-banner .moments-cover > .navbar.moments-nav:not(.is-solid) .nav-plus,
html.android-wv .moments-page.has-banner .moments-cover > .navbar.moments-nav:not(.is-solid) h1 {
    filter: none;
}
.moment-banner {
    position: relative;
    margin: 0;
    background: #e8e8e8;
    overflow: hidden;
    aspect-ratio: 750 / 280;
    /* 设计稿字在图中部；顶栏+状态栏较高时略下移画面，避免字顶进标题 */
    min-height: 120px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}
.moment-banner.is-dragging {
    cursor: grabbing;
}
.moment-banner-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.32s ease;
    will-change: transform;
}
.moment-banner.is-dragging .moment-banner-track {
    transition: none;
}
.moment-banner-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}
.moment-banner-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}
.moment-banner-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
    z-index: 1;
}
.moment-banner-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
}
.moment-banner-dot.is-on {
    background: #fff;
}
/* 顶部居中互动条：在导航下方，不挡返回/相机 */
.moment-interact-chip {
    position: sticky;
    top: calc(44px + var(--safe-top));
    z-index: 8;
    display: block;
    width: max-content;
    max-width: calc(100% - 96px);
    margin: 8px auto 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 13px;
    line-height: 1.3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    -webkit-tap-highlight-color: transparent;
}
.moment-interact-chip[hidden] { display: none !important; }
.moment-interact-chip:active { background: rgba(0, 0, 0, 0.85); }
.moment-item.is-interact-focus {
    background: #f7faf7;
}
.moment-item .comment.is-interact-focus {
    background: #eaf7ee;
    border-radius: 4px;
}
.moments-feed { padding: 0 0 24px; }
.moments-feed-sentinel {
    height: 1px;
    margin: 0;
    padding: 0;
    visibility: hidden;
}
.moments-feed-status {
    margin: 0;
    padding: 12px 16px 80px;
    text-align: center;
    font-size: 13px;
    color: var(--sub);
}
.moment-item {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--line);
}
.moment-avatar { flex: none; display: block; line-height: 0; }
.moment-avatar:active { opacity: 0.75; }
.moment-body { flex: 1; min-width: 0; }
.moment-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.moment-name-wrap {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.moment-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #576b95;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}
.moment-name-wrap .vip-badge,
.moment-name-wrap .merchant-badge {
    flex: none;
    margin: 0;
    align-self: center;
}
.moment-name:active { opacity: 0.75; }
.moment-head-action { flex: none; margin: 0; }
.moment-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--green);
    border-radius: 4px;
    background: #fff;
    color: var(--green);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}
.moment-pill:active { background: rgba(7, 193, 96, 0.08); }
.moment-menu-btn {
    flex: none;
    width: 28px;
    height: 28px;
    margin: 0 0 0 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #888;
    line-height: 0;
}
.moment-menu-btn svg { width: 18px; height: 18px; display: block; margin: 0 auto; }
.moment-menu-btn:active { background: rgba(0, 0, 0, 0.06); }
.moment-hi {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #576b95;
    font-size: 13px;
    line-height: 20px;
    flex: none;
}
.moment-hi:active { opacity: 0.7; }
.moment-hi-ico {
    width: 18px;
    height: 18px;
    display: block;
    flex: none;
}
.moment-sheet {
    position: fixed;
    inset: 0;
    z-index: 70;
}
.moment-sheet[hidden] { display: none !important; }
.moment-sheet-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.moment-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 16px calc(12px + var(--safe-bottom));
    background: #f5f5f5;
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
    transition: transform 0.5s ease;
}
.moment-sheet.open .moment-sheet-mask { opacity: 1; }
.moment-sheet.open .moment-sheet-panel { transform: translateY(0); }
.moment-sheet-actions {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    padding: 8px 4px 16px;
    background: #fff;
    border-radius: 8px;
}
.moment-sheet-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    line-height: 1.2;
}
.moment-sheet-ico {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.moment-sheet-ico svg { width: 26px; height: 26px; display: block; }
.moment-sheet-item:active .moment-sheet-ico { background: #e5e5e5; }
.moment-sheet-cancel {
    display: block;
    width: 100%;
    height: 44px;
    margin: 12px 0 0;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 16px;
}
.moment-sheet-cancel:active { background: #f0f0f0; }
.moment-report-box textarea {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: #f7f7f7;
    color: var(--text);
    font-size: 15px;
    line-height: 1.45;
    resize: none;
    box-sizing: border-box;
}
button.menu-cell {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background: #fff;
    border: 0;
    cursor: pointer;
}
.stranger-folder-avatar {
    font-size: 15px;
    font-weight: 500;
}
.moment-likes a,
.moment-social .comment a {
    color: #576b95;
    text-decoration: none;
}
.moment-likes a:active,
.moment-social .comment a:active { opacity: 0.75; }
.moment-text {
    margin: 6px 0 0;
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.moment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 8px;
    max-width: 260px;
}
.moment-grid.one { grid-template-columns: 1fr; max-width: 180px; }
.moment-grid.four { grid-template-columns: repeat(2, 1fr); max-width: 180px; }
.moment-grid .moment-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    overflow: hidden;
    background: #f0f0f0;
    cursor: zoom-in;
}
.moment-grid .moment-media img,
.moment-grid .moment-media .moment-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.moment-grid .moment-media img.moment-thumb:not([src]),
.moment-grid .moment-media img.moment-thumb[src=""] {
    opacity: 0;
}
.moment-grid .moment-load-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: #888;
    background: #f0f0f0;
    pointer-events: none;
    z-index: 1;
}
.moment-grid .moment-media.is-loaded .moment-load-pct,
.moment-grid .moment-load-pct.is-done {
    display: none;
}
.moment-grid .moment-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
.moment-grid .moment-play::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 11px;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #fff;
}

/* 朋友圈发帖入口抽屉 */
.moment-sheet {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.moment-sheet[hidden] { display: none !important; }
html.moment-sheet-open,
html.moment-sheet-open body { overflow: hidden; }
.moment-sheet-dim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.moment-sheet.is-open .moment-sheet-dim { opacity: 1; }
.moment-sheet-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 8px 12px calc(12px + var(--safe-bottom));
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.moment-sheet.is-open .moment-sheet-panel { transform: translateY(0); }
.moment-sheet-group {
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}
.moment-sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 0;
    border-top: 0.5px solid var(--line);
    border-radius: 0;
    color: var(--text);
    font: inherit;
    font-size: 17px;
    line-height: 1.3;
    text-decoration: none;
    text-align: center;
    background: #fff;
    cursor: pointer;
}
.moment-sheet-item:first-child { border-top: 0; }
.moment-sheet-item:active { background: #f5f5f5; }
.moment-sheet-sub {
    color: var(--sub);
    font-size: 12px;
    line-height: 1.3;
}
.moment-sheet-cancel {
    display: block;
    width: 100%;
    height: 56px;
    margin-top: 8px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font-size: 17px;
}
.moment-sheet-cancel:active { background: #f5f5f5; }
@media (min-width: 768px) {
    .moment-sheet-panel {
        width: var(--phone-width);
        margin: 0 auto;
    }
}
.media-thumb-video {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 2;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
}
.compose-viewer {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    touch-action: none;
}
.compose-viewer[hidden] { display: none !important; }
html.compose-viewer-open,
html.compose-viewer-open body { overflow: hidden; }
.compose-viewer-close {
    position: absolute;
    top: calc(12px + var(--safe-top));
    right: calc(12px + env(safe-area-inset-right));
    z-index: 2;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(96, 96, 96, 0.72);
    color: #fff;
    font-size: 26px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
}
.compose-viewer-close:active {
    background: rgba(72, 72, 72, 0.85);
}
.compose-viewer-counter {
    position: absolute;
    top: calc(18px + var(--safe-top));
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    margin: 0;
    padding: 2px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.02em;
    pointer-events: none;
}
.compose-viewer-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    transition: transform 0.12s ease, opacity 0.12s ease;
}
.compose-viewer-media {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
}
.compose-viewer img.compose-viewer-media { cursor: zoom-out; }
@media (min-width: 768px) {
    .compose-viewer {
        left: 50%;
        width: var(--phone-width);
        transform: translateX(-50%);
    }
}
.moment-del {
    margin: 0;
    flex: none;
}
.moment-del button {
    border: 0;
    background: transparent;
    color: var(--sub);
    font-size: 13px;
    padding: 0;
}
.moment-meta-spacer { flex: 1; min-width: 8px; }
.friend-card .friend-action {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding: 8px 16px 24px;
    background: transparent;
}
.friend-card .friend-action button {
    height: 40px;
    margin: 0;
    padding: 0 28px;
    border: 0;
    border-radius: 6px;
    background: var(--green);
    color: #fff;
    font-size: 16px;
}
.friend-card .friend-action button:active { background: var(--green-press); }
.friend-edit {
    margin-top: 12px;
    padding-top: 0;
    padding-bottom: 16px;
}
/* 微信资料页：左标签、右内容；覆盖 .sheet label 的整行块级样式 */
.friend-edit .friend-cell {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 0;
    border-bottom: 0.5px solid var(--line);
    color: var(--text);
    font-size: 17px;
    line-height: 24px;
}
.friend-edit .friend-cell:last-of-type { border-bottom: 0; }
.friend-cell-k {
    flex: none;
    width: 4.5em;
    color: var(--text);
    font-size: 17px;
}
.friend-cell-v {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 17px;
    line-height: 24px;
    text-align: left;
}
.friend-cell-v::placeholder { color: var(--sub); }
.friend-cell-tags {
    align-items: flex-start;
}
.friend-tag-list {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.friend-tag-empty {
    color: var(--sub);
    font-size: 17px;
}
/* 必须盖过 .sheet label，否则标签会变成整行错位 */
.friend-edit label.friend-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 4px 10px;
    border: 0.5px solid #cfcfcf;
    border-radius: 3px;
    border-bottom: 0.5px solid #cfcfcf;
    background: #f7f7f7;
    color: var(--text);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}
.friend-edit label.friend-tag input { display: none; }
.friend-edit label.friend-tag.on,
.friend-edit label.friend-tag:has(input:checked) {
    border-color: #576b95;
    background: rgba(87, 107, 149, 0.12);
    color: #576b95;
}
.friend-edit button {
    width: 100%;
    margin-top: 16px;
}

#messages,
#messages .msg,
#messages .bubble,
#messages .who,
#messages .quote,
#messages .recall,
#messages .stamp {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.bubble {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 9px 12px;
    border-radius: 4px;
    background: #fff;
    font-size: 16px;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: pre-wrap;
}
.bubble.has-reward {
    display: flex;
    flex-direction: column;
    gap: 0;
    white-space: normal;
}
.bubble-text {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
.bubble-reward {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    color: #fa9d3b;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
}
.msg.mine .bubble-reward {
    border-top-color: rgba(0, 0, 0, 0.06);
}

.stack,
.bubble-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: none;
    min-width: 0;
    width: auto;
    /* 头像约 40 + gap，避免长文顶满 */
    max-width: calc(100% - 48px);
}

.msg.mine .stack,
.msg.mine .bubble-col { align-items: flex-end; }
/* 己方还要给气泡旁状态勾留位（约 20 + gap），长文不再顶格挡住对勾 */
.msg.mine .stack {
    max-width: calc(100% - 72px);
}
.bubble-col .stack { max-width: 100%; }

.quote {
    max-width: 100%;
    margin: 0 0 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: #e1e1e1;
    color: #666;
    font-size: 12px;
    line-height: 1.35;
}

.quote b { display: block; font-weight: 500; color: #576b95; }
.quote span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.press-menu[hidden],
.act-mask[hidden],
.quote-bar[hidden],
.plus-panel[hidden],
.emoji-dock[hidden],
.emoji-panel[hidden],
.sticker-panel[hidden],
.tool svg[hidden],
#hold-talk[hidden],
#send-btn[hidden] { display: none !important; }

.quote-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f7f7f7;
    border-top: 0.5px solid #d6d6d6;
}

.quote-bar div { flex: 1; min-width: 0; }
.quote-bar strong { display: block; color: #576b95; font-size: 12px; font-weight: 500; }
.quote-bar span {
    display: block;
    overflow: hidden;
    color: #888;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quote-bar button {
    width: 24px;
    height: 24px;
    flex: none;
    border: 0;
    background: transparent;
    color: #888;
    font-size: 18px;
    line-height: 1;
}

.press-menu {
    position: fixed;
    z-index: 20;
    display: flex;
    overflow: hidden;
    border-radius: 6px;
    background: #4c4c4c;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.press-menu button {
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-right: 0.5px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: #fff;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 0.08s ease;
}

.press-menu button:last-child { border-right: 0; }

/* 鼠标悬停变淡；触屏用 :active 按压反馈（避免触屏假 hover 粘住） */
@media (hover: hover) and (pointer: fine) {
    .press-menu button:hover {
        background: rgba(255, 255, 255, 0.16);
    }
}

.press-menu button:active {
    background: rgba(255, 255, 255, 0.22);
}

.act-mask {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.act-dim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.45);
}

.act-sheet {
    position: relative;
    width: min(100%, var(--phone-width));
    padding: 8px 12px calc(12px + var(--safe-bottom));
}

.act-sheet p {
    margin: 0 0 8px;
    padding: 14px 12px;
    border-radius: 10px;
    background: #fff;
    color: #888;
    font-size: 13px;
    text-align: center;
}

.act-sheet button {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 8px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    font-size: 17px;
}

.act-sheet .act-go { color: #fa5151; }
.who {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 2px 2px;
    color: #888;
    font-size: 12px;
    line-height: 1.2;
}
.who .who-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.who .vip-badge,
.who .merchant-badge {
    flex: none;
    margin: 0;
    height: 14px;
    min-height: 14px;
    padding: 0 3px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    border-radius: 2px;
    vertical-align: middle;
}
.msg.mine .bubble { background: var(--bubble); }

.msg:not(.mine) .bubble::after,
.msg.mine .bubble::after {
    content: "";
    position: absolute;
    top: 12px;
    width: 8px;
    height: 8px;
    background: #fff;
    transform: rotate(45deg);
}

.msg:not(.mine) .bubble::after { left: -4px; }
.msg.mine .bubble::after { right: -4px; background: var(--bubble); }

#send-form {
    display: flex;
    flex: none;
    align-items: flex-end;
    gap: 8px;
    box-sizing: border-box;
    min-height: calc(56px + var(--safe-bottom));
    padding: 8px 8px calc(8px + var(--safe-bottom));
    background: var(--bar);
    border-top: 0.5px solid #d6d6d6;
}
/* 键盘顶起时收起底栏安全区（与 .comment-dock.keyboard-open 同理），避免输入区被挤扁/挡字 */
#send-form.keyboard-open {
    min-height: 56px;
    padding-bottom: 8px;
}

.tool {
    position: relative;
    width: 36px;
    height: 36px;
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 2px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #191919;
    touch-action: none;
}
.tool:active { background: var(--press); }

#mic-btn.recording,
#hold-talk.recording { color: #191919; }

#hold-talk {
    flex: 1;
    height: 40px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    font-size: 16px;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

#hold-talk:active { background: #d9d9d9; }
#hold-talk.recording { background: #d9d9d9; }
#hold-talk.recording.is-cancel {
    color: #fa5151;
    background: #fdeeee;
}

/* 按住说话：居中浮层；上滑进入取消态 */
.voice-record-layer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 22;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 88px;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
}
.voice-record-layer[hidden] { display: none !important; }
.voice-record-card {
    min-width: 148px;
    max-width: 72%;
    padding: 22px 28px 18px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    text-align: center;
}
.voice-record-icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: 36px;
    margin-bottom: 14px;
}
.voice-record-icon span {
    display: block;
    width: 5px;
    border-radius: 3px;
    background: #07c160;
    animation: voice-wave 0.9s ease-in-out infinite;
}
.voice-record-icon span:nth-child(1) { height: 12px; animation-delay: 0s; }
.voice-record-icon span:nth-child(2) { height: 28px; animation-delay: 0.15s; }
.voice-record-icon span:nth-child(3) { height: 18px; animation-delay: 0.3s; }
.voice-record-layer.is-cancel .voice-record-icon span {
    background: #fa5151;
    animation: none;
    height: 8px;
}
.voice-record-tip {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}
.voice-record-hint {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
}
.voice-record-layer.is-cancel .voice-record-card {
    background: rgba(250, 81, 81, 0.92);
}
.voice-record-layer.is-cancel .voice-record-hint {
    color: rgba(255, 255, 255, 0.9);
}
@keyframes voice-wave {
    0%, 100% { transform: scaleY(0.55); }
    50% { transform: scaleY(1); }
}

#mode-btn .icon-mic,
#mode-btn .icon-key {
    /* 叠两枚图标切换；居中，避免和过渡壳话筒错位闪一下 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#mode-btn .icon-key { display: none; }
#send-form.voice-mode #mode-btn .icon-mic { display: none !important; }
#send-form.voice-mode #mode-btn .icon-key { display: block !important; }
#send-form.voice-mode #body,
#send-form.voice-mode #emoji-btn { display: none; }

.emoji-dock {
    flex: none;
    background: #f7f7f7;
    border-top: 0.5px solid #d6d6d6;
}

.emoji-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 44px;
    padding: 0 10px;
    border-bottom: 0.5px solid #e5e5e5;
    background: #f7f7f7;
}

.emoji-tab {
    width: 36px;
    height: 36px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #888;
    padding: 0;
}

.emoji-tab svg {
    width: 22px;
    height: 22px;
}

.emoji-tab.is-on {
    background: #ebebeb;
    color: #191919;
}

.emoji-panel {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 8px calc(8px + var(--safe-bottom));
    background: #f7f7f7;
}

.emoji-panel button {
    height: 40px;
    border: 0;
    background: transparent;
    font-size: 24px;
}

.sticker-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px calc(10px + var(--safe-bottom));
    background: #f7f7f7;
}

.sticker-panel button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    aspect-ratio: 1;
    border: 0;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
}

.sticker-panel button img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
}

.sticker-panel .sticker-empty {
    grid-column: 1 / -1;
    margin: 24px 0;
    color: #888;
    font-size: 13px;
    text-align: center;
}

.msg.recalled,
.msg.system-notice { justify-content: center; }
.msg.recalled .avatar,
.msg.recalled .who,
.msg.recalled .msg-state,
.msg.system-notice .avatar,
.msg.system-notice .who,
.msg.system-notice .msg-state { display: none; }
.recall {
    margin: 0;
    color: #888;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.confirm-password-label {
    display: block;
    margin: 0;
    padding: 0 20px 12px;
}
.confirm-password-label input {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: #f7f7f7;
    font-size: 16px;
    color: var(--text);
}
.confirm-password-error {
    margin: 0;
    padding: 0 20px 12px;
    color: var(--danger);
    font-size: 13px;
    text-align: center;
}

.bubble.voice,
.bubble.video { cursor: pointer; }

.bubble.media,
.bubble.sticker,
.bubble.card,
.bubble.location {
    display: block;
    padding: 0;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: #191919;
}

.bubble.media,
.bubble.sticker,
.bubble.video {
    line-height: 0;
    white-space: normal;
    background: transparent;
}

.msg.mine .bubble.media,
.msg.mine .bubble.sticker,
.msg.mine .bubble.video,
.msg.mine .bubble.card,
.msg.mine .bubble.location { background: #fff; }

.msg.mine .bubble.media,
.msg:not(.mine) .bubble.media,
.msg.mine .bubble.sticker,
.msg:not(.mine) .bubble.sticker,
.msg.mine .bubble.video,
.msg:not(.mine) .bubble.video { background: transparent; }

.bubble.media::after,
.bubble.sticker::after { content: none; }

.msg.mine .bubble.card::after,
.msg.mine .bubble.location::after { background: #fff; }
.bubble.location {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    max-width: 240px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.bubble.location .location-pin {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: rgba(7, 193, 96, 0.12);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bubble.location .location-pin svg {
    width: 22px;
    height: 22px;
}
.bubble.location .location-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bubble.location .location-name {
    font-size: 15px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bubble.location .location-coord {
    color: var(--sub);
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 位置详情：站内全屏，勿跳进高德 WebView */
.location-sheet {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}
.location-sheet[hidden] { display: none !important; }
html.location-sheet-open,
html.location-sheet-open body { overflow: hidden; }
.location-sheet-nav {
    flex: none;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding-top: var(--safe-top);
}
.location-sheet-nav .back {
    border: 0;
    background: transparent;
    padding: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    cursor: pointer;
}
.location-sheet-nav .back svg {
    width: 22px;
    height: 22px;
}
.location-sheet-body {
    flex: 1;
    padding: 24px 16px calc(24px + var(--safe-bottom));
    box-sizing: border-box;
}
.location-sheet-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.location-sheet-pin {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: rgba(7, 193, 96, 0.12);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
}
.location-sheet-pin svg {
    width: 28px;
    height: 28px;
}
.location-sheet-meta {
    flex: 1;
    min-width: 0;
}
.location-sheet-name {
    font-size: 17px;
    line-height: 1.4;
    word-break: break-word;
}
.location-sheet-coord {
    margin-top: 4px;
    color: var(--sub);
    font-size: 13px;
    line-height: 1.4;
    word-break: break-all;
}
.location-sheet-open {
    margin-top: 24px;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}
.location-sheet-open:active {
    background: var(--green-press);
}
.location-sheet-hint {
    margin: 12px 0 0;
    color: var(--sub);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.auto-reply-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
}
.auto-reply-toggle-row > span:first-child {
    flex: 1;
    min-width: 0;
    font-size: 16px;
}
#auto-reply-toggle {
    pointer-events: auto;
    cursor: pointer;
}

.menu-stack {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.menu-stack .hint {
    color: var(--sub);
    font-size: 13px;
}
.quick-reply-actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px;
    background: #fff;
    border-bottom: 0.5px solid var(--line);
}
.quick-reply-actions form {
    margin: 0;
}
.quick-reply-actions button {
    border: 0;
    background: transparent;
    color: var(--link);
    font-size: 13px;
    padding: 4px 0;
    cursor: pointer;
}
.quick-reply-actions button:disabled {
    color: #ccc;
    cursor: default;
}
.quick-reply-actions button.danger {
    color: var(--danger);
    margin-left: auto;
}
.menu > li .quick-reply-actions {
    border-bottom: 0;
}
.menu > li + li .menu-cell {
    border-top: 0.5px solid var(--line);
}

.quick-reply-sheet {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.quick-reply-sheet[hidden] { display: none !important; }
.quick-reply-dim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
.quick-reply-panel {
    position: relative;
    background: #fff;
    border-radius: 12px 12px 0 0;
    max-height: min(70vh, 520px);
    display: flex;
    flex-direction: column;
    padding-bottom: var(--safe-bottom);
}
.quick-reply-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--line);
    font-size: 16px;
}
.quick-reply-close {
    border: 0;
    background: transparent;
    color: var(--link);
    font-size: 15px;
    cursor: pointer;
}
.quick-reply-list {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}
.quick-reply-loading {
    margin: 0;
    padding: 24px 16px;
    color: var(--sub);
    text-align: center;
    font-size: 14px;
}
.quick-reply-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    border: 0;
    border-bottom: 0.5px solid var(--line);
    background: #fff;
    text-align: left;
    padding: 14px 16px;
    font: inherit;
    color: var(--text);
    cursor: pointer;
}
.quick-reply-item:active {
    background: var(--press-row);
}
.quick-reply-item strong {
    font-size: 16px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quick-reply-item span {
    color: var(--sub);
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.quick-reply-manage {
    display: block;
    text-align: center;
    padding: 14px 16px;
    color: var(--link);
    font-size: 15px;
    text-decoration: none;
    border-top: 0.5px solid var(--line);
}

.bubble.media img {
    display: block;
    width: 160px;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.bubble.sticker img {
    display: block;
    width: 120px;
    max-width: 42vw;
    height: auto;
    border-radius: 4px;
}

.bubble.video {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #111;
}

.bubble.video video,
.bubble.video img.video-poster {
    display: block;
    width: 180px;
    max-width: 100%;
    max-height: 240px;
    object-fit: cover;
    pointer-events: none;
    background: #111;
}

.bubble.video:not(.expired)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.45);
}

.bubble.video:not(.expired)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: -8px 0 0 -4px;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #fff;
}

.viewer {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    touch-action: none;
}
.viewer[hidden] { display: none !important; }
html.viewer-open,
html.viewer-open body { overflow: hidden; }
.viewer-close {
    position: absolute;
    top: calc(12px + var(--safe-top));
    right: calc(12px + env(safe-area-inset-right));
    z-index: 2;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(96, 96, 96, 0.72);
    color: #fff;
    font-size: 26px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
}
.viewer-close:active {
    background: rgba(72, 72, 72, 0.85);
}
.viewer-stage {
    touch-action: none;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, opacity 0.12s ease;
}
.viewer-media {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
}
.viewer img.viewer-media {
    cursor: zoom-out;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
/* 对话图片/视频：已发送，后台压缩中 */
.bubble.media.is-processing,
.bubble.video.is-processing {
    position: relative;
}
.bubble.media .media-process-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 120px;
    background: #e8e8e8;
    color: #888;
    font-size: 13px;
}
.media-process-tag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    pointer-events: none;
}
/* 大图长按：微信式底部「保存图片」 */
.viewer-save-mask {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.viewer-save-mask[hidden] { display: none !important; }
.viewer-save-dim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.45);
}
.viewer-save-sheet {
    position: relative;
    width: min(100%, var(--phone-width));
    padding: 8px 12px calc(12px + var(--safe-bottom));
}
.viewer-save-sheet button {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 8px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 17px;
}
.viewer-save-sheet .viewer-save-go {
    color: var(--text);
    font-weight: 500;
}
.viewer-save-sheet .viewer-save-cancel {
    color: var(--text);
}
.viewer-save-sheet button:active {
    background: #f2f2f2;
}
@media (min-width: 768px) {
    .viewer {
        left: 50%;
        width: var(--phone-width);
        transform: translateX(-50%);
    }
}

.bubble.card {
    width: 200px;
    padding: 10px 12px 8px;
}
.card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.bubble.card .avatar {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 4px;
    font-size: 16px;
}
.card-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.card-label {
    display: block;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 0.5px solid var(--line);
    color: var(--sub);
    font-size: 12px;
}

.plus-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 8px;
    padding: 16px 12px calc(16px + var(--safe-bottom));
    background: var(--bar);
    border-top: 0.5px solid #d6d6d6;
}

.plus-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: #666;
    font-size: 12px;
}

.plus-item input { display: none; }

.plus-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #fff;
    color: #191919;
}

.plus-icon svg { width: 28px; height: 28px; }

.add-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    background: #fff;
}

.add-search input {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: 0;
    border-radius: 4px;
    background: var(--bg);
    padding: 0 10px;
    font-size: 16px;
}

.add-search button {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    background: var(--green);
    color: #fff;
    font-size: 16px;
}

.my-account {
    margin: 28px 16px 0;
    text-align: center;
    color: #191919;
    font-size: 17px;
    line-height: 1.3;
}

.my-account span {
    display: block;
    margin-bottom: 6px;
    color: #888;
    font-size: 13px;
}

.card-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 16px;
}

.card-page h2 { margin: 8px 0 0; font-size: 20px; font-weight: 500; }
.card-page .hint { color: #888; }
.card-page button {
    margin-top: 16px;
    height: 40px;
    padding: 0 28px;
    border: 0;
    border-radius: 6px;
    background: var(--green);
    color: #fff;
    font-size: 16px;
}
/* 名片点开：微信式个人资料 */
.card-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 16px 0;
    padding: 16px;
    border-radius: 8px;
    background: #fff;
}
.card-profile .avatar {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: 6px;
    font-size: 28px;
}
.card-profile-meta { flex: 1; min-width: 0; }
.card-profile-meta h2,
.name-with-vip {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}
.name-with-vip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}
.name-with-vip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    margin: 0;
    height: 16px;
    padding: 0 4px;
    border: 0.5px solid currentColor;
    border-radius: 2px;
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    vertical-align: middle;
}
.vip-badge.vip {
    color: #fa5151;
}
.vip-badge.svip {
    color: #8a4dff;
}
.vip-badge.compact,
.merchant-badge.compact {
    flex: none;
    margin: 0;
    height: 16px;
    min-height: 16px;
    max-height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}
.merchant-badge.compact {
    font-weight: 500;
}
.title-wrap .vip-badge,
.title-wrap .merchant-badge,
.name-with-marks .vip-badge,
.name-with-marks .merchant-badge,
.navbar h1 .vip-badge,
.navbar h1 .merchant-badge {
    flex: none;
    margin: 0;
    align-self: center;
}
.card-profile-meta .hint {
    margin: 6px 0 0;
    color: var(--sub);
    font-size: 14px;
}
.card-profile-tip {
    margin: 24px 16px 0;
    text-align: center;
    color: var(--sub);
    font-size: 14px;
}

.tool svg { width: 28px; height: 28px; display: block; }

#body {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    max-height: 100px;
    height: 40px;
    border: 0;
    outline: none;
    border-radius: 6px;
    background: #fff;
    color: #111111;
    /* 8+24+8=40，避免安卓 WebView 内边距+行高把汉字裁掉「打了字看不见」 */
    padding: 8px 10px;
    font-size: 16px;
    line-height: 24px;
    resize: none;
    overflow-y: hidden;
    box-sizing: border-box;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
html.android-wv #body {
    min-height: 44px;
    height: 44px;
    padding: 8px 10px;
    line-height: 28px;
}

#send-btn {
    height: 32px;
    margin-bottom: 4px;
    padding: 0 12px;
    flex: none;
    border: 0;
    border-radius: 4px;
    background: var(--green);
    color: #fff;
    font-size: 15px;
    white-space: nowrap;
}

#send-btn:active { background: var(--green-press); }

#new-pill {
    position: absolute;
    left: 50%;
    bottom: calc(64px + var(--safe-bottom));
    transform: translateX(-50%);
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    background: var(--green);
    color: #fff;
    font-size: 13px;
}

.thread { position: relative; }

.menu {
    list-style: none;
    margin: 12px 16px 0;
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}
.discover-joined { margin-top: 12px; }
.circle-mark {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fa9d3b;
    color: #fff;
    font-size: 13px;
    object-fit: cover;
}
.menu-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--line);
    background: #fff;
    color: var(--text);
    text-decoration: none;
    font-size: 16px;
}
.menu li:last-child .menu-cell { border-bottom: 0; }
button.menu-cell { width: 100%; border: 0; text-align: left; }
.subpage .cells li { display: flex; align-items: center; }
.subpage .cells li .chat-cell { flex: 1; min-width: 0; }
.subpage .cells form button {
    border: 0;
    background: transparent;
    color: #fa5151;
    height: 44px;
    padding: 0 16px;
}
.contacts .request form button {
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    background: var(--green);
    color: #fff;
    font-size: 14px;
}
.contacts .request form button.ghost {
    background: transparent;
    color: #333;
}
.menu-cell:active { background: var(--press-row); }
/* 勿让 .toggle 吃到 flex:1，否则开关被拉长变形（私聊/群聊信息页） */
.menu-cell > span:not(.chevron):not(.menu-icon):not(.hint):not(.circle-mark):not(.toggle):not(.menu-avatar):not(.friend-cell-label):not(.friend-album):not(.friend-album-empty):not(.friend-tag-values) { flex: 1; min-width: 0; }
.menu-cell > .chevron { margin-left: auto; }
.menu-icon { width: 24px; height: 24px; flex: none; display: flex; }
.menu-icon svg { width: 24px; height: 24px; display: block; }
.chevron {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #c7c7c7;
    border-top: 1.5px solid #c7c7c7;
    transform: rotate(45deg);
    flex: none;
}
.profile .chevron { margin-left: auto; }
.menu-cell > .hint { margin-left: auto; color: var(--sub); font-size: 13px; flex: none; }
.menu-cell > .hint + .chevron { margin-left: 8px; }
.menu form { margin: 0; }
.menu .shop-buy button[type="submit"],
.menu .shop-buy button[type="button"] {
    flex: none;
    height: 32px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 14px;
}
.menu .shop-buy button[type="submit"]:active {
    background: var(--green-press);
}
.menu .shop-buy-blocked button[disabled] {
    background: #c8c8c8;
    color: #fff;
    cursor: default;
}
.shop-block-reason {
    display: block;
    line-height: 1.45;
    white-space: normal;
}
button.menu-cell.toggle-row {
    width: 100%;
    border: 0;
    background: #fff;
    text-align: left;
    font: inherit;
    color: var(--text);
    cursor: pointer;
}
button.menu-cell.toggle-row:active { background: var(--press-row); }
.toggle {
    display: block;
    box-sizing: border-box;
    margin-left: auto;
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    height: 28px;
    flex: none;
    flex-shrink: 0;
    border: 0;
    border-radius: 14px;
    background: #e5e5e5;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    pointer-events: none;
}
.toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: #fff;
    transition: transform 0.15s ease;
}
.toggle:checked,
.toggle.is-on { background: var(--green); }
.toggle:checked::after,
.toggle.is-on::after { transform: translateX(18px); }
#conversation-list,
.swipe-row,
.swipe-row .chat-cell {
    touch-action: pan-y;
}
.alias-form { background: #fff; }
.alias-form .menu-cell { border-bottom: 0; }
.alias-input {
    margin-left: auto;
    width: 46%;
    border: 0;
    background: transparent;
    text-align: right;
    font-size: 16px;
    color: var(--sub);
}
.alias-save {
    display: block;
    width: 100%;
    height: 44px;
    border: 0;
    border-top: 0.5px solid var(--line);
    background: #fff;
    color: var(--link);
    font-size: 16px;
}
.avatar-row { position: relative; display: flex; align-items: center; justify-content: space-between; }
.avatar-row input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.note { margin: 0; padding: 12px 0; color: var(--sub); font-size: 13px; line-height: 1.55; }
.subpage { padding-bottom: calc(24px + var(--safe-bottom)); }
/* 设置 / 表单子页：白顶栏 + 底部分割线 */
.subpage > .navbar {
    background: #fff;
    border-bottom: 0.5px solid var(--line);
}
/* 盖过上面白底：有 banner 的朋友圈顶栏靠 --moments-nav-bg 渐显（安卓壳见上方 html.android-wv 白底规则） */
.subpage.moments-page.has-banner .moments-cover > .navbar.moments-nav {
    background: rgba(255, 255, 255, var(--moments-nav-bg, 0));
    border-bottom-color: rgba(229, 229, 229, var(--moments-nav-bg, 0));
}
/* 子页顶栏下搜索：与标题拉开间距，灰底圆角（对标通讯录搜索） */
.subpage > form.search {
    justify-content: flex-start;
    gap: 6px;
    height: 36px;
    margin: 12px 16px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--input-bg);
    color: #b2b2b2;
}
.subpage > form.search .search-ico {
    width: 16px;
    height: 16px;
    flex: none;
}
.subpage > form.search.open input,
.subpage > form.search input {
    position: static;
    inset: auto;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    opacity: 1;
    text-align: left;
    color: var(--text);
}
.subpage > form.search + .letter {
    margin-top: 4px;
}
.sheet {
    margin: 12px 16px 0;
    padding: 4px 16px 16px;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}
.sheet label { display: block; padding: 12px 0; border-bottom: 0.5px solid var(--line); color: var(--sub); font-size: 13px; }
.sheet label:last-of-type { border-bottom: 0; }
.sheet input, .sheet textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 16px;
}
.sheet > button,
.sheet button[type="submit"] {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 24px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 17px;
    font-weight: 500;
}
.circle-head button, .composer-card button, .comment-form button {
    height: 36px;
    margin-top: 16px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
}
.sheet > button:active,
.sheet button[type="submit"]:active,
.circle-head button:active,
.composer-card button:active,
.comment-form button:active,
.post-entry:active,
.card-page button:active,
.nick-form button:active,
.contacts .request form button:active:not(.ghost),
.crop-actions #crop-use:active {
    background: var(--green-press);
}
.contacts .request form button.ghost:active { background: var(--press); }
.circle-head { padding: 20px 16px; background: #fff; }
.circle-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.circle-head strong { font-size: 22px; }
.circle-head p { margin: 8px 0; color: #666; }
.circle-head span { color: var(--sub); font-size: 13px; }
.post-entry {
    flex: none;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    background: var(--green);
    color: #fff;
    font: inherit;
    font-size: 15px;
    line-height: 32px;
    cursor: pointer;
}
a.post-entry { text-decoration: none; }
button.post-entry { appearance: none; }
.composer-card, .moment { margin-top: 8px; padding: 12px 16px; background: #fff; }
.composer-card textarea {
    width: 100%;
    min-height: 72px;
    border: 0;
    resize: none;
    font: inherit;
    font-size: 16px;
}
.composer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.composer-actions input[type="file"] {
    flex: 1;
    min-width: 0;
}
.composer-actions button {
    flex: none;
    margin-top: 0;
    white-space: nowrap;
}
.moment { display: flex; gap: 10px; margin-top: 0; border-bottom: 0.5px solid var(--line); }
.moment .avatar { margin: 0; }
.moment > div { flex: 1; min-width: 0; }
.moment .moment-name,
.moment strong { color: #576b95; font-size: 16px; }
.moment p { margin: 6px 0; white-space: pre-wrap; word-break: break-word; }
.moment img, .moment video {
    display: block;
    width: 180px;
    max-width: 100%;
    margin-top: 8px;
    border-radius: 4px;
    background: #111;
}
.moment-meta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
    margin-top: 8px;
}
.moment-meta time { color: var(--sub); font-size: 13px; flex: none; }
.moment-more {
    flex: none;
    width: 32px;
    height: 20px;
    border: 0;
    border-radius: 4px;
    background: #f7f7f7;
    color: #576b95;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 20px;
}
.moment-actions {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    height: 36px;
    overflow: hidden;
    border-radius: 4px;
    background: #4c4c4c;
}
.moment-actions[hidden] { display: none; }
.moment-actions form { margin: 0; }
.moment-actions form, .moment-actions button, .moment-actions a {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
}
.moment-ico {
    width: 16px;
    height: 16px;
    flex: none;
    display: block;
}
.moment-social { margin-top: 6px; padding: 6px 8px; border-radius: 4px; background: #f7f7f7; }
.moment-likes { margin: 0 0 2px; color: #576b95; font-size: 14px; line-height: 1.45; }
.moment-likes::before {
    content: "♥";
    margin-right: 4px;
    color: #576b95;
    font-size: 12px;
}
.moment-social .comment-replyable {
    cursor: pointer;
}
.moment-social .comment {
    margin: 2px 0;
    color: #333;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}
.moment-social .comment b { color: #576b95; font-weight: 400; }
.moment-comment-del {
    display: inline;
    margin: 0;
    padding: 0;
}
.moment-comment-del button {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 0 0 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #666;
    vertical-align: -3px;
    line-height: 0;
}
.moment-comment-del .moment-ico.trash {
    width: 18px;
    height: 18px;
}
.comment-dock {
    /* 与 .tabbar / .pick-bar 同：left 50% + translate，避免 100vw 与滚动条导致桌面相对 .phone 错位 */
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 0;
    z-index: 40;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 8px 12px calc(8px + var(--safe-bottom));
    background: #f7f7f7;
    border-top: 0.5px solid var(--line);
}
.comment-dock[hidden] { display: none; }
.comment-dock input[name="body"] {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: 36px;
    margin: 0;
    border: 0;
    outline: none;
    border-radius: 4px;
    padding: 0 10px;
    background: #fff;
    color: #111111;
    font-size: 16px;
    line-height: 36px;
    -webkit-appearance: none;
    appearance: none;
}
html.android-wv .comment-dock input[name="body"] {
    height: 40px;
    line-height: 40px;
}
.comment-dock button[type="submit"] {
    flex: none;
    flex-shrink: 0;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    background: var(--green);
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
}
/* 键盘顶起时去掉底部安全区留白，避免「发送」被顶出可视区 */
.comment-dock.keyboard-open {
    padding-bottom: 8px;
}
.compose-page .navbar { background: #f7f7f7; }
.compose-form {
    background: #fff;
    padding-bottom: 20px;
}
.compose-page textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    margin: 0;
    padding: 16px 16px 12px;
    border: 0;
    resize: none;
    background: #fff;
    font: inherit;
    font-size: 17px;
    line-height: 1.45;
    outline: none;
}
.compose-media {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 4px 16px 0;
}
.compose-hint {
    margin: 10px 0 0;
    padding: 0 16px;
    color: var(--sub);
    font-size: 13px;
    line-height: 1.55;
}
.media-pick,
.media-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    background: #f7f7f7;
    color: #c0c0c0;
    cursor: pointer;
}
.media-pick input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.media-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.media-empty {
    color: #c0c0c0;
}
.media-empty svg {
    width: 36px;
    height: 36px;
}
.media-filled {
    display: block;
}
.media-pick img,
.media-pick video,
.media-preview img,
.media-preview video,
.media-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.media-thumb {
    cursor: zoom-in;
}
button.media-pick,
label.media-pick {
    border: 0;
    padding: 0;
    box-sizing: border-box;
}
.media-thumb-broken,
.pick-confirm-cell.is-broken {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ececec;
}
.media-thumb-fail {
    color: var(--sub);
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    padding: 0 6px;
}
.media-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
}
/* 朋友圈选图确认（对齐微信：选完先确认再进编辑页网格） */
.pick-confirm {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: #000;
    color: #fff;
}
.pick-confirm[hidden] { display: none !important; }
html.pick-confirm-open,
html.pick-confirm-open body {
    overflow: hidden;
}
.pick-confirm-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    height: calc(44px + var(--safe-top));
    padding: var(--safe-top) 12px 0;
    background: #1a1a1a;
}
.pick-confirm-cancel,
.pick-confirm-done {
    min-width: 52px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 16px;
}
.pick-confirm-done {
    background: var(--green);
    color: #fff;
}
.pick-confirm-title {
    flex: 1;
    margin: 0 8px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}
.pick-confirm-grid {
    flex: 1;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px;
    padding-bottom: calc(2px + var(--safe-bottom));
    -webkit-overflow-scrolling: touch;
}
.pick-confirm-cell {
    position: relative;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: #222;
    overflow: hidden;
}
.pick-confirm-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pick-confirm-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    background: var(--green);
    color: #fff;
    font-size: 12px;
    line-height: 19px;
    text-align: center;
}
@media (min-width: 768px) {
    .pick-confirm {
        left: 50%;
        width: var(--phone-width);
        transform: translateX(-50%);
    }
}

button.nav-post {
    position: absolute;
    top: calc(var(--safe-top) + 6px);
    right: 17px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    background: var(--green);
    color: #fff;
    font-size: 15px;
}
button.nav-post:active { background: var(--green-press); }
.comment { color: #333; font-size: 14px; }
.comment b { color: #576b95; font-weight: 500; }
.comment-form { display: flex; gap: 8px; }
.comment-form input { flex: 1; height: 32px; border: 0; background: var(--bg); border-radius: 4px; padding: 0 8px; }
.search.open input { text-align: left; }

.cropper[hidden] { display: none; }
.cropper {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(0, 0, 0, 0.86);
}
.crop-tip { margin: 0; color: #fff; font-size: 14px; }
.crop-stage {
    position: relative;
    width: min(280px, 72vw);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: #1a1a1a;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
    touch-action: none;
}
.crop-stage img {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    transform-origin: 0 0;
    user-select: none;
    pointer-events: none;
}
.crop-zoom { width: min(280px, 72vw); color: #fff; font-size: 14px; }
.crop-zoom input { width: 100%; margin-top: 8px; }
.crop-actions { display: flex; gap: 12px; }
.crop-actions button {
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 4px;
    background: #3a3a3a;
    color: #fff;
}
.crop-actions #crop-use { background: var(--green); }

.chooser {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.8s ease;
}
.chooser[hidden] { display: none !important; }
.chooser.is-open { background: rgba(0, 0, 0, 0.45); }
.chooser-card {
    width: 100%;
    padding: 0 8px calc(8px + var(--safe-bottom));
    transform: translateY(100%);
    transition: transform 0.8s ease;
}
.chooser.is-open .chooser-card { transform: translateY(0); }
.chooser-group, .chooser-cancel, .nick-form {
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}
.chooser-group button, .chooser-cancel button, .nick-form button {
    display: block;
    width: 100%;
    height: 56px;
    border: 0;
    background: #fff;
    color: #111;
    font-size: 17px;
}
.chooser-group button + button { border-top: 0.5px solid #ededed; }
.chooser-cancel { margin-top: 8px; }
.nick-form { margin-bottom: 8px; padding: 16px 16px 8px; }
.nick-form label { display: block; color: #888; font-size: 13px; }
.nick-form input {
    display: block;
    width: 100%;
    height: 40px;
    margin: 8px 0 12px;
    border: 0;
    border-bottom: 0.5px solid #ededed;
    /* ≥16px：iOS 点输入框不整页放大 */
    font-size: 17px;
}
.nick-form button {
    height: 40px;
    border-radius: 6px;
    background: var(--green);
    color: #fff;
}

.pick { cursor: pointer; }
.pick:active { background: var(--press-row); }
.pick input { width: 22px; height: 22px; flex: none; accent-color: var(--green); }
.pick-page { padding-bottom: 72px; }
.pick-section {
    margin: 12px 16px 0;
    color: var(--sub);
    font-size: 13px;
    line-height: 1.4;
}
.chat-members {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 18px;
    margin: 12px 16px 0;
    padding: 16px;
    border-radius: 8px;
    background: #fff;
}
.chat-member {
    width: 56px;
    color: var(--text);
    text-align: center;
    text-decoration: none;
}
.chat-member:active { opacity: 0.75; }
.chat-member-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.chat-member .avatar {
    width: 48px;
    height: 48px;
    margin: 0 auto 6px;
    border-radius: 4px;
    font-size: 20px;
}
.chat-member-name {
    display: block;
    overflow: hidden;
    color: var(--sub);
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-member-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 6px;
    border: 1px dashed #c6c6c6;
    border-radius: 4px;
    color: #888;
    background: #fafafa;
}
.chat-member-add svg { width: 22px; height: 22px; display: block; }
.chat-member-remove {
    color: #888;
}
.chat-member { position: relative; }
.chat-member-role {
    display: block;
    margin-top: 2px;
    color: var(--link);
    font-size: 11px;
    line-height: 1.2;
}
.pick-bar .danger-pick {
    background: #fa5151;
}
.pick-bar .danger-pick:disabled {
    opacity: 0.45;
}
.group-member-count {
    margin: 8px 16px 0;
    color: var(--sub);
    font-size: 13px;
}
.group-members-more {
    display: block;
    width: calc(100% - 32px);
    margin: 4px 16px 0;
    padding: 10px 0;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--sub);
    font-size: 14px;
    text-align: center;
}
.group-members-more:active { background: var(--press-row); }
.group-members-more[hidden] { display: none !important; }
.group-members-more:disabled { opacity: 0.6; }
.group-section-title {
    margin: 16px 16px 8px;
    color: var(--sub);
    font-size: 13px;
}
/* 设置子页说明：左右 16px，勿用内联 style（CSP 会丢掉） */
.settings-note {
    margin: 8px 16px 0;
    color: var(--sub);
    font-size: 13px;
    line-height: 1.55;
}
/* 设置页主操作：绿底满宽，对齐宪法主按钮 */
.settings-action {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 32px);
    height: 44px;
    margin: 12px 16px 0;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
}
.settings-action:active { background: var(--green-press); }
/* 群管理设置：白底搜索条（灰底页上更清晰）+ 右侧搜索按钮 */
.group-admin-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px;
    padding: 8px 8px 8px 12px;
    border-radius: 8px;
    background: #fff;
    border: 0.5px solid var(--line);
    color: #b2b2b2;
}
.group-admin-search .search-ico {
    width: 16px;
    height: 16px;
    flex: none;
}
.group-admin-search input {
    flex: 1;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 16px;
}
.group-admin-search input::placeholder { color: #b2b2b2; }
.group-admin-search button[type="submit"] {
    flex: none;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 15px;
}
.group-admin-search button[type="submit"]:active { background: var(--green-press); }
.group-admin-search + .menu,
.group-admin-search + .empty,
.group-admin-search + .settings-action {
    margin-top: 12px;
}
.settings-page > .settings-note + .group-section-title,
.settings-page > .menu + .settings-note {
    margin-top: 12px;
}
.settings-page > .settings-note + .menu,
.settings-page > .settings-note + .empty {
    margin-top: 12px;
}
.group-name-form,
.group-alias-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.group-name-label {
    flex: 0 0 auto;
    color: var(--text);
    font-size: 16px;
}
.group-name-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 16px;
    text-align: right;
}
.group-name-save {
    flex: none;
    height: 32px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--link);
    font-size: 15px;
}
.menu-cell > .menu-avatar {
    flex: none;
    margin-left: auto;
    width: 40px;
    height: 40px;
}
.menu-cell > .menu-avatar + .chevron {
    margin-left: 8px;
}
.danger-logout { color: var(--danger); }
.group-name-save.danger-text { color: var(--danger); }
.group-notice-body {
    margin: 0;
    padding: 12px 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
/* 扫一扫：微信式全屏摄像头；左上返回圆钮，右下相册 */
.scan-page.screen,
.scan-page {
    position: relative;
    background: #000;
    color: #fff;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
    padding: 0;
    padding-bottom: 0;
}
.scan-stage {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    background: #000;
}
.scan-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background: #000;
    transform: translateZ(0);
}
.scan-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
}
.scan-line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 22%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
    box-shadow: 0 0 10px rgba(7, 193, 96, 0.85);
    animation: scan-line-move 2.4s ease-in-out infinite;
}
@keyframes scan-line-move {
    0% { top: 18%; opacity: 0.35; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 72%; opacity: 0.35; }
}
.scan-back {
    position: absolute;
    z-index: 3;
    left: 16px;
    top: calc(10px + var(--safe-top));
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.scan-back svg {
    width: 18px;
    height: 18px;
    display: block;
}
.scan-back:active {
    opacity: 0.85;
}
.scan-tip {
    position: absolute;
    z-index: 3;
    left: 16px;
    right: 16px;
    bottom: calc(100px + var(--safe-bottom));
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    pointer-events: none;
}
.scan-album-fab {
    position: absolute;
    z-index: 3;
    right: 22px;
    bottom: calc(28px + var(--safe-bottom));
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(55, 55, 55, 0.88);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.scan-album-fab svg {
    width: 26px;
    height: 26px;
    display: block;
}
.scan-album-fab:active {
    background: rgba(70, 70, 70, 0.95);
}
.scan-page .toast {
    z-index: 4;
}
.group-qr-card { text-align: center; }
.group-qr-title {
    margin: 8px 0 16px;
    font-size: 17px;
    font-weight: 600;
}
.group-qr-img {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto 12px;
    background: #fff;
}
.group-qr-tip {
    margin: 0;
    color: var(--sub);
    font-size: 13px;
    line-height: 1.55;
}
.group-search-form {
    display: flex;
    gap: 8px;
    margin: 12px 16px 0;
}
.group-search-form input {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
}
.group-search-form button {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 15px;
}
.group-search-list { margin-top: 12px; }
.group-announce-bar {
    display: block;
    margin: 0;
    padding: 8px 16px;
    background: #fffbe8;
    color: #666;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    border-bottom: 0.5px solid var(--line);
}
.speak-lock-tip {
    margin: 0;
    padding: 10px 16px;
    background: #fff;
    color: var(--sub);
    font-size: 13px;
    text-align: center;
    border-top: 0.5px solid var(--line);
}
.bg-swatch {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 6px;
    border: 0.5px solid var(--line);
}
.bg-swatch.bg-default { background: #ededed; }
.bg-swatch.bg-soft { background: #e8e8e8; }
.bg-swatch.bg-mint { background: #d9f2e6; }
.bg-swatch.bg-sky { background: #d6ebfa; }
.bg-swatch.bg-peach { background: #f8e3d6; }
.bg-swatch.bg-lavender { background: #e6e0f5; }
.thread-bg-soft { background: #e8e8e8; }
.thread-bg-mint { background: #d9f2e6; }
.thread-bg-sky { background: #d6ebfa; }
.thread-bg-peach { background: #f8e3d6; }
.thread-bg-lavender { background: #e6e0f5; }
.thread-bg-soft .navbar,
.thread-bg-mint .navbar,
.thread-bg-sky .navbar,
.thread-bg-peach .navbar,
.thread-bg-lavender .navbar { background: rgba(255, 255, 255, 0.92); }
.pick-bar {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 6;
    width: 100%;
    transform: translateX(-50%);
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px calc(10px + var(--safe-bottom));
    background: var(--bar);
    border-top: 0.5px solid #d6d6d6;
}
.pick-bar button {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    background: var(--green);
    color: #fff;
}
.pick-bar button:active { background: var(--green-press); }

.bubble.voice {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    min-width: 74px;
    max-width: 210px;
    height: 40px;
    padding: 0 12px;
    white-space: nowrap;
    line-height: 1;
}
.msg:not(.mine) .bubble.voice { justify-content: flex-start; }
.voice-len { font-size: 15px; }
.msg.mine .bubble.voice .voice-len { margin-right: auto; }
.msg:not(.mine) .bubble.voice .voice-icon { order: -1; transform: scaleX(-1); }
.msg:not(.mine) .bubble.voice .voice-len { margin-left: auto; }
.voice-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex: none;
}
.voice-icon i {
    position: absolute;
    top: 50%;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-color: transparent currentColor transparent transparent;
    transform: translateY(-50%);
}
.voice-icon i:nth-child(1) {
    left: 1px;
    width: 3px;
    height: 3px;
    border: 0;
    border-radius: 1px;
    background: currentColor;
}
.voice-icon i:nth-child(2) { left: 4px; width: 8px; height: 8px; }
.voice-icon i:nth-child(3) { left: 2px; width: 14px; height: 14px; }
.bubble.voice.recording .voice-icon i:nth-child(2),
.bubble.voice.recording .voice-icon i:nth-child(3) {
    animation: voice-pulse 1s ease-in-out infinite;
}
.bubble.voice.recording .voice-icon i:nth-child(3) { animation-delay: 0.2s; }
@keyframes voice-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

.bubble.media.expired,
.bubble.video.expired {
    line-height: 1.4;
    padding: 8px 12px;
    background: #ededed;
    color: #888;
}

html.in-app,
html.in-app body {
    background: #000;
}

.open-browser {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
}

html.in-app .phone { display: none; }

.open-browser[hidden] { display: none; }

.open-browser-arrow {
    position: absolute;
    top: calc(4px + var(--safe-top));
    right: 10px;
    width: min(62vw, 240px);
    height: auto;
    pointer-events: none;
}

.open-browser-text {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0 28px;
    font-size: 18px;
    line-height: 1.7;
    text-align: center;
}

.open-browser-note {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: calc(48px + var(--safe-bottom));
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    color: rgba(255, 255, 255, 0.86);
}

.circle-avatar {
    display: block;
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    border-radius: 8px;
    object-fit: cover;
}
.sheet + .sheet { margin-top: 12px; }
.sheet .check { display: flex; align-items: center; gap: 8px; color: var(--text); }
.sheet .check input { width: auto; margin: 0; }
.sheet .note code {
    display: inline-block;
    max-width: 100%;
    padding: 0 4px;
    border-radius: 4px;
    background: #f2f2f2;
    word-break: break-all;
    font-size: 13px;
}

/* —— 手机通知（微信设置风格） —— */
.push-page {
    background: var(--bg);
    padding-bottom: calc(32px + var(--safe-bottom));
}
.push-page .push-nav {
    background: #fff;
    border-bottom: 0.5px solid var(--line);
}
.push-form {
    margin: 0;
    padding: 12px 16px 0;
}
.push-group {
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}
.push-option + .push-option {
    border-top: 0.5px solid #e5e5e5;
}
.push-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    margin: 0;
    padding: 12px 16px;
    color: #000;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.push-cell:active { background: #ececec; }
.push-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.push-dot {
    position: relative;
    width: 20px;
    height: 20px;
    flex: none;
    border: 1.5px solid #c6c6c6;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}
.push-radio:checked + .push-dot {
    border-color: #07c160;
    background: #07c160;
}
.push-radio:checked + .push-dot::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 1.8px 1.8px 0;
    transform: rotate(45deg);
}
.push-radio:disabled + .push-dot {
    opacity: 0.35;
}
.push-cell-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.push-title {
    color: #000;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 400;
}
.push-desc {
    color: #888;
    font-size: 13px;
    line-height: 1.35;
}
.push-panel {
    padding: 4px 16px 16px 48px;
    background: #fff;
}
.push-panel[hidden] { display: none !important; }
.push-steps {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.push-steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
}
.push-steps li:last-child { margin-bottom: 0; }
.push-step-num {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 1px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #666;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}
.push-step-body {
    flex: 1;
    min-width: 0;
    color: #333;
    font-size: 15px;
    line-height: 1.55;
}
.push-step-extra {
    color: #888;
    font-size: 13px;
}
.push-link {
    color: #576b95;
    text-decoration: none;
    font-weight: 500;
}
.push-link:active { opacity: 0.7; }
.push-field { margin-top: 12px; }
.push-label {
    margin: 0 0 6px;
    color: #888;
    font-size: 13px;
    line-height: 1.4;
}
.push-copy {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 12px;
    border: 0;
    border-radius: 6px;
    background: #f7f7f7;
    color: #191919;
    font: inherit;
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
    word-break: break-all;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.push-copy:active { background: #ececec; }
.push-tip {
    margin: 12px 0 0;
    color: #888;
    font-size: 13px;
    line-height: 1.55;
}
.push-tip strong { color: #555; font-weight: 600; }
.push-warn { color: #fa5151; }
.push-input-wrap {
    display: block;
    margin-top: 14px;
}
.push-input-wrap input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    border: 0;
    border-radius: 6px;
    background: #f7f7f7;
    color: #191919;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
}
.push-input-wrap input::placeholder { color: #b2b2b2; }
.push-save {
    display: block;
    width: 100%;
    height: 44px;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #07c160;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
}
.push-save:active { background: #06ae56; }
.push-copy-sheet {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}
.push-copy-card {
    width: min(100%, var(--phone-width));
    padding: 16px 16px calc(16px + var(--safe-bottom));
    border-radius: 12px 12px 0 0;
    background: #fff;
}
.push-copy-card p {
    margin: 0 0 10px;
    color: #888;
    font-size: 13px;
    line-height: 1.4;
}
.push-copy-manual {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 0.5px solid var(--line);
    border-radius: 6px;
    background: #f7f7f7;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    resize: none;
    word-break: break-all;
}
.push-copy-card button {
    width: 100%;
    height: 44px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 16px;
}
.member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    border-bottom: 0.5px solid var(--line);
}
.member-row button { margin-top: 0; background: transparent; color: var(--danger); }
.member-row button:active { background: var(--press); }
.push-copy-card button:active { background: var(--green-press); }
#new-pill:active { background: var(--green-press); }

.coins-page .coins-balance {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 12px 16px 0;
    padding: 18px 16px;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    color: var(--sub);
}
.coins-page .coins-balance strong {
    color: #fa9d3b;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.coins-page .coins-seller {
    margin: 12px 16px 0;
    padding: 16px;
    border-radius: 8px;
    background: #fff;
}
.coins-page .coins-seller-tip {
    margin: 0 0 14px;
    color: var(--sub);
    font-size: 14px;
}
.coins-page .coins-seller-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.coins-page .coins-seller-account {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.coins-page .coins-seller-label {
    color: var(--sub);
    font-size: 12px;
}
.coins-page .coins-seller-account strong {
    color: var(--text);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.coins-page .coins-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    line-height: 1;
}
.coins-page .coins-add:active { background: var(--green-press); }
.coins-page .coins-seller .error { margin-top: 12px; }
.coins-page .coins-price {
    margin: 12px 16px 0;
    padding: 28px 20px 32px;
    border-radius: 8px;
    background: #fff;
    text-align: center;
}
.coins-page .coins-price h2 {
    margin: 0 0 20px;
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.12em;
}
.coins-page .coins-rate {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.coins-page .coins-rate span {
    color: #fa9d3b;
    font-weight: 700;
}
.coins-page .coins-min {
    margin: 0;
    color: var(--sub);
    font-size: 14px;
}
.coins-page .coins-bills {
    margin: 12px 16px 24px;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}
.coins-page .coins-bills-title {
    margin: 0;
    padding: 14px 16px 8px;
    color: var(--sub);
    font-size: 13px;
    font-weight: 400;
}
.coins-page .coins-bills-empty {
    margin: 0;
    padding: 28px 16px 32px;
    color: var(--sub);
    font-size: 14px;
    text-align: center;
}
.coin-bills-sentinel {
    height: 1px;
    margin: 0;
    padding: 0;
    pointer-events: none;
}
.coin-bills-sentinel[hidden] { display: none !important; }
.coin-bills-status {
    margin: 0;
    padding: 12px 16px 16px;
    color: var(--sub);
    font-size: 13px;
    text-align: center;
}
.coin-bills-status[hidden] { display: none !important; }
.shop-buy {
    width: 100%;
}
.shop-buy-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.shop-buy-text strong {
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
}
.shop-buy-text .hint {
    margin: 0;
    color: var(--sub);
    font-size: 13px;
}
.coin-bill-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.coin-bill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-top: 0.5px solid var(--line);
    color: inherit;
    text-decoration: none;
}
.coin-bill-list li:first-child .coin-bill-row { border-top: 0; }
.coin-bill-row:active { background: var(--press-row); }
.coin-bill-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.coin-bill-main strong {
    overflow: hidden;
    color: var(--text);
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.coin-bill-main time {
    color: #b2b2b2;
    font-size: 13px;
}
.coin-bill-amount {
    flex: none;
    color: var(--text);
    font-size: 17px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.coin-bill-amount.in { color: #fa9d3b; }

.coin-bill-page .coin-bill-hero {
    margin-top: 12px;
    padding: 28px 16px 24px;
    background: #fff;
    text-align: center;
}
.coin-bill-hero-title {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 16px;
}
.coin-bill-hero-amount {
    margin: 0;
    color: var(--text);
    font-size: 40px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.coin-bill-hero-amount.in { color: #fa9d3b; }
.coin-bill-sheet {
    margin-top: 12px;
    padding: 4px 16px 8px;
    background: #fff;
}
.coin-bill-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 0.5px solid var(--line);
    font-size: 15px;
}
.coin-bill-line:last-child { border-bottom: 0; }
.coin-bill-line span {
    flex: none;
    color: #888;
}
.coin-bill-line strong {
    min-width: 0;
    color: var(--text);
    font-weight: 400;
    text-align: right;
    word-break: break-word;
}

/* 扩列广场 */
/* 扩列入口：与普通会话同行高/头像尺寸，不置顶、不单独缩卡片 */
img.avatar.plaza-folder-avatar {
    border-radius: 6px;
    background: transparent;
}
.plaza-folder-row .chat-cell {
    /* 右侧小头像+> 与整行（含 48 头像）垂直居中 */
    align-items: center;
}
.plaza-folder-row .plaza-trail {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    align-self: center;
    margin-left: 4px;
}
.plaza-folder-row .plaza-faces {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.plaza-folder-row .plaza-face {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
    flex: none;
    background: #e5e5e5;
    border: 1.5px solid #fff;
    box-sizing: border-box;
    margin-left: -6px;
}
.plaza-folder-row .plaza-face:first-child {
    margin-left: 0;
}
.plaza-folder-row .plaza-trail > .chevron {
    width: 10px;
    height: 10px;
    margin-left: 0;
    border-right-width: 2px;
    border-top-width: 2px;
    border-color: #b2b2b2;
}

/* 对齐设计稿：四列白卡轻阴影、头像细边、卡内圆角条按钮；列表按钮收小。 */
.plaza-page .nav-text { color: var(--green); }
.plaza-page .settings-note { margin: 12px 16px 0; }
.plaza-note {
    display: flex;
    align-items: center;
    gap: 6px;
}
.plaza-note-ico {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--sub);
}
.plaza-featured {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 16px 0;
}
.plaza-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 100%;
    padding: 10px 6px 8px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    text-align: center;
}
/* 新上/新抢：内描边绿线，不占外尺寸、不挤乱四列 */
.plaza-tile.is-fresh {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 0 0 1.5px var(--green);
}
.plaza-tile-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.plaza-tile-rank {
    font-size: 12px;
    font-weight: 600;
    color: #b2b2b2;
    line-height: 1;
    letter-spacing: 0.02em;
}
.plaza-tile-avatar,
.plaza-row-avatar {
    border-radius: 50%;
    overflow: hidden;
    display: block;
    flex: none;
    background: #eee;
    box-sizing: border-box;
}
.plaza-tile-avatar {
    width: 52px;
    height: 52px;
    border: 1px solid var(--line);
}
.plaza-row-avatar {
    width: 48px;
    height: 48px;
}
.plaza-tile-avatar img,
.plaza-row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.plaza-tile-name {
    max-width: 100%;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plaza-tile-meta {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    min-height: 36px; /* VIP 行 + 商家空当，避免按钮高低不平 */
    overflow: hidden;
}
.plaza-tile-meta .vip-badge,
.plaza-tile-meta .merchant-badge { flex: none; }
.plaza-tile-merchant-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 16px;
    max-width: 100%;
    overflow: hidden;
}
.plaza-tile-meta .merchant-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plaza-tile > .plaza-tile-btn,
.plaza-tile > .plaza-tile-form,
.plaza-tile > .plaza-tile-form .plaza-tile-btn {
    width: 100%;
}
/* 按钮贴底，同行四卡对齐 */
.plaza-tile > .plaza-tile-btn,
.plaza-tile > .plaza-tile-form { margin-top: auto; }
.plaza-tile-form { margin: 0; }
.plaza-tile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
/* 设计稿：卡内满宽圆角条，字号略小 */
.plaza-tile .plaza-tile-btn {
    height: 28px;
    padding: 0 4px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}
.plaza-tile-btn:active { background: var(--green-press); }
.plaza-tile-btn:disabled { opacity: 0.55; }
.plaza-tile-btn.is-ghost {
    border: 0;
    background: #f0f0f0;
    color: var(--text);
    font-weight: 400;
}
.plaza-tile-btn.is-ghost:active { background: #e5e5e5; }
.plaza-tile-btn.is-muted {
    border: 0;
    background: #f0f0f0;
    color: var(--sub);
    font-weight: 400;
}
.plaza-list {
    margin: 12px 16px 0;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.plaza-list.is-after-grid { margin-top: 14px; }
.plaza-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--line);
}
.plaza-row:last-child { border-bottom: 0; }
.plaza-row.is-fresh {
    box-shadow: inset 0 0 0 1.5px var(--green);
}
.plaza-row-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.plaza-row-main { flex: 1; min-width: 0; }
.plaza-row-title {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.plaza-row-title strong {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}
.plaza-row-title .vip-badge,
.plaza-row-title .merchant-badge { flex: none; }
.plaza-row-title .merchant-badge {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plaza-row-slot {
    display: block;
    margin-top: 2px;
    color: var(--sub);
    font-size: 13px;
    line-height: 1.4;
}
.plaza-row > .plaza-tile-btn,
.plaza-row > .plaza-tile-form { flex: none; }
.plaza-row .plaza-tile-btn {
    width: auto;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
}
.plaza-more {
    display: block;
    width: calc(100% - 32px);
    margin: 12px 16px 0;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 16px;
}
.plaza-more:disabled { opacity: 0.55; }
.plaza-empty { padding: 48px 16px; }

.plaza-seats-page .settings-note { margin: 12px 16px 0; }
.plaza-seats-cta-wrap {
    margin: 24px 16px 0;
}
.plaza-seats-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.plaza-seats-cta:active { background: var(--green-press); }
.plaza-seat-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 16px 0;
    font-size: 13px;
    color: var(--sub);
}
.plaza-seat-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.plaza-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.plaza-dot.is-free { background: var(--green); }
.plaza-dot.is-busy { background: #fa9d3b; }
.plaza-dot.is-protect { background: #fa5151; }
.plaza-seat-section {
    margin: 12px 16px 0;
    padding: 12px;
    border-radius: 8px;
    background: #fff;
}
.plaza-seat-section:last-of-type { margin-bottom: 32px; }
.plaza-seat-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}
.plaza-seat-section-head strong {
    font-size: 15px;
    font-weight: 600;
}
.plaza-seat-section-head span {
    font-size: 12px;
    color: var(--sub);
}
.plaza-seat-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.plaza-seat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    padding: 8px 4px;
    border: 0;
    border-radius: 8px;
    font-size: 12px;
    color: #fff;
}
.plaza-seat.is-free { background: var(--green); }
.plaza-seat.is-busy { background: #fa9d3b; }
.plaza-seat.is-protect { background: #fa5151; }
.plaza-seat:disabled { opacity: 0.72; }
.plaza-seat-no { font-weight: 700; font-size: 14px; }
.plaza-seat-state { font-size: 11px; opacity: 0.95; }
.plaza-seat-price { font-size: 11px; opacity: 0.9; }
.plaza-buy-sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
}
.plaza-buy-sheet[hidden] { display: none !important; }
html.plaza-buy-open,
html.plaza-buy-open body { overflow: hidden; }
.plaza-buy-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.plaza-buy-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 16px calc(16px + var(--safe-bottom));
    border-radius: 12px 12px 0 0;
    background: #fff;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.plaza-buy-sheet.is-open .plaza-buy-dim { opacity: 1; }
.plaza-buy-sheet.is-open .plaza-buy-panel { transform: translateY(0); }
.plaza-buy-title {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: var(--text);
}
.plaza-buy-bill {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    background: #f7f7f7;
    border-radius: 8px;
    overflow: hidden;
}
.plaza-buy-bill li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 0.5px solid var(--line);
    font-size: 15px;
}
.plaza-buy-bill li:last-child { border-bottom: 0; }
.plaza-buy-bill span { color: var(--sub); }
.plaza-buy-bill strong { font-weight: 500; color: var(--text); }
.plaza-buy-total strong { color: var(--green); font-weight: 600; }
.plaza-buy-tip {
    margin: 0 0 16px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}
.plaza-buy-submit {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0 0 10px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: #fff;
    font-size: 16px;
}
.plaza-buy-submit:active { background: var(--green-press); }
.plaza-buy-submit:disabled { opacity: 0.6; }
.plaza-buy-cancel {
    display: block;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: #f5f5f5;
    color: var(--text);
    font-size: 16px;
}
.plaza-buy-cancel:active { background: var(--press-row); }
@media (min-width: 768px) {
    .plaza-buy-panel {
        left: 50%;
        right: auto;
        width: var(--phone-width);
        transform: translate(-50%, 100%);
    }
    .plaza-buy-sheet.is-open .plaza-buy-panel {
        transform: translate(-50%, 0);
    }
}

@media (min-width: 768px) {
    .tabbar, .pick-bar, .chooser-card, .comment-dock { width: var(--phone-width); }
    .index { right: calc((100vw - var(--phone-width)) / 2 + 1px); }
    .cropper {
        left: 50%;
        width: var(--phone-width);
        transform: translateX(-50%);
    }
}