:root {
  --safe-top: max(env(safe-area-inset-top, 0px), var(--safe-top-fallback, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-bottom-fallback, 0px));
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--text-primary);
  background: var(--neutral-bg);
}
.money-view { background:#111; color:#e7e7e7; }
.money-view header { height:68px; padding:17px 17px 0; }
.money-view header button { font-size:39px; line-height:26px; }
.money-view header h1 { margin:2px 0 0; font-size:23px; }
.money-view header span { margin-top:4px; font-size:17px; letter-spacing:3px; }
.money-fields { margin:28px 16px 0; gap:13px; }
.money-fields label,.money-fields>button { min-height:70px; padding:19px 17px; border-radius:6px; font-size:20px; }
.money-fields label input { font-size:20px; }
.money-fields>button i { font-size:28px; }
.money-total { margin-top:92px; font-size:31px; }
.money-total strong { font-size:55px; font-weight:500; }
.money-submit { width:47%; height:55px; margin:34px auto 0; border-radius:8px; font-size:20px; }
.money-foot { bottom:25px; font-size:14px; }
.money-card { min-width:175px; padding:12px; gap:5px; }
.money-card strong { font-size:21px; }
.money-card small { font-size:12px; }
/* 分隔提示不是一条真消息：必须脱离 .message-row 的 38px 头像栏网格，
   否则文字会被挤进头像列里竖着一个字一行。 */
.message-row.rotation-row { display: block; margin: 10px 0; text-align: center; }
.rotation-row small { padding: 4px 10px; border-radius: 10px; color: var(--app-muted); background: var(--app-surface); font-size: 11px; }
.theme-day, .theme-soft, .theme-night, .theme-gray, .theme-blue, .theme-purple {
  --app-surface: var(--neutral-surface);
  --app-card: var(--neutral-surface-raised);
  --app-border: var(--border);
  --app-text: var(--text-primary);
  --app-muted: var(--text-secondary);
  --app-accent: var(--accent);
  --app-cover: var(--accent-dark);
}
.theme-gray .app-tabbar, .theme-gray .me-menu, .theme-gray .social-tabs, .theme-gray .chat-toolbar, .theme-gray .conversation-tabs, .theme-gray .message-composer,
.theme-blue .app-tabbar, .theme-blue .me-menu, .theme-blue .social-tabs, .theme-blue .chat-toolbar, .theme-blue .conversation-tabs, .theme-blue .message-composer,
.theme-purple .app-tabbar, .theme-purple .me-menu, .theme-purple .social-tabs, .theme-purple .chat-toolbar, .theme-purple .conversation-tabs, .theme-purple .message-composer,
.theme-day .app-tabbar, .theme-day .me-menu, .theme-day .social-tabs, .theme-day .chat-toolbar, .theme-day .conversation-tabs, .theme-day .message-composer, .theme-day .chat-search, .theme-day .chat-popover, .theme-day .attachment-popover, .theme-day .emoji-popover, .theme-day .chat-functions,
.theme-night .app-tabbar, .theme-night .me-menu, .theme-night .social-tabs, .theme-night .chat-toolbar, .theme-night .conversation-tabs, .theme-night .message-composer, .theme-night .chat-search, .theme-night .chat-popover, .theme-night .attachment-popover, .theme-night .emoji-popover, .theme-night .chat-functions { backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); }

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: #ececec; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.chat-phone {
  position: relative;
  width: min(100vw, calc(100vh * 393 / 852), 393px);
  aspect-ratio: 393 / 852;
  overflow: hidden;
  isolation: isolate;
  background: #f7f7f8;
  box-shadow: 0 24px 70px rgb(0 0 0 / 12%);
}
@media (max-width: 480px) {
  body { background: #f7f7f8; }
  .chat-phone {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    box-shadow: none;
  }
}

.chat-status {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 53px;
  padding: max(18px, env(safe-area-inset-top)) 36px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: #111;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.chat-status-left, .chat-status-right { display: flex; align-items: center; gap: 7px; }
.chat-mark { position: relative; width: 18px; height: 18px; margin-top: 1px; }
.chat-mark i { position: absolute; top: 1px; left: 5px; width: 8px; height: 16px; border: 2px solid currentColor; border-radius: 50%; }
.chat-mark i:nth-child(2) { transform: rotate(60deg); }
.chat-mark i:nth-child(3) { transform: rotate(120deg); }
.chat-status-right { gap: 8px; }
.chat-signal { height: 15px; display: flex; align-items: flex-end; gap: 2px; }
.chat-signal i { display: block; width: 3px; border-radius: 2px; background: currentColor; }
.chat-signal i:nth-child(1) { height: 5px; }
.chat-signal i:nth-child(2) { height: 8px; }
.chat-signal i:nth-child(3) { height: 11px; }
.chat-signal i:nth-child(4) { height: 14px; }
.chat-battery { position: relative; min-width: 31px; height: 16px; padding: 0 4px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 5px; font-size: 10px; line-height: 1; }
.chat-battery::after { content: ""; position: absolute; right: -4px; width: 2px; height: 7px; border-radius: 0 2px 2px 0; background: currentColor; opacity: .45; }
.chat-battery::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 2px; background: #27b45b; }
.chat-battery b { color: #fff; font-weight: 700; }

.chat-list-view, .chat-detail-view, .app-view { position: absolute; inset: 0; background: var(--app-surface, #f7f7f8); }
.chat-toolbar { position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: calc(67px + var(--safe-top)); padding-top: var(--safe-top); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #e8e4df; background: rgb(247 247 248 / 96%); }
.chat-toolbar h1 { margin: 0; color: #444; font-size: 20px; font-weight: 700; line-height: 1; }
.toolbar-back { position: absolute; left: 26px; top: calc(var(--safe-top) + 33.5px); width: 28px; height: 38px; padding: 0 0 5px; transform: translateY(-50%); border: 0; color: #444; background: transparent; font-family: Arial, sans-serif; font-size: 42px; font-weight: 300; line-height: 28px; cursor: pointer; transition: transform .12s ease, opacity .12s ease; }
.toolbar-back:focus-visible, .add-button:focus-visible, .group-toggle:focus-visible { outline: 3px solid rgb(47 47 47 / 18%); outline-offset: 2px; }
.toolbar-actions { position: absolute; right: 29px; top: calc(var(--safe-top) + 33.5px); display: flex; align-items: center; gap: 14px; transform: translateY(-50%); }
.toolbar-icon { width: 30px; height: 38px; padding: 0; border: 0; color: #444; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; transition: transform .12s ease, opacity .12s ease; }
.group-toggle { width: 56px; height: 40px; padding: 0; border: 0; border-radius: 10px; color: #fff; background: #2f2f2f; font-size: 18px; font-weight: 700; cursor: pointer; transition: transform .12s ease, opacity .12s ease; }
.add-button { width: 28px; height: 40px; padding: 0 0 4px; border: 0; color: #2f2f2f; background: transparent; font-size: 38px; font-weight: 300; line-height: 32px; cursor: pointer; transition: transform .12s ease, opacity .12s ease; }
.toolbar-back:active { transform: translateY(-50%) scale(0.88); opacity: 0.75; }
.toolbar-icon:active, .group-toggle:active, .add-button:active { transform: scale(0.88); opacity: 0.75; }

.conversation-list { position: absolute; inset: calc(109px + var(--safe-top)) 0 calc(68px + var(--safe-bottom)); overflow-y: auto; scrollbar-width: none; }
.conversation-tabs { position: absolute; top: calc(67px + var(--safe-top)); right: 0; left: 0; z-index: 2; height: 42px; padding: 5px 20px; display: flex; gap: 7px; border-bottom: 1px solid #ece9e5; background: #f7f7f8; }
.conversation-tabs button { min-width: 54px; border: 0; border-radius: 7px; color: #888; background: transparent; font-size: 13px; cursor: pointer; }
.conversation-tabs button.active { color: #333; background: #e9e8e7; font-weight: 700; }
.chat-search { position: absolute; top: calc(8px + var(--safe-top)); right: 14px; left: 14px; z-index: 5; height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #dedbd8; border-radius: 10px; background: #fff; box-shadow: 0 7px 20px rgb(0 0 0 / 8%); }
.chat-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; }
.chat-search button { border: 0; color: #777; background: transparent; font-size: 22px; }
.conversation-list::-webkit-scrollbar { display: none; }
.conversation-row { position: relative; width: 100%; min-height: 80px; padding: 20px 20px 10px; appearance: none; display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; align-items: start; border: 0; border-bottom: 1px solid #eeebe7; border-radius: 0; background: #f7f7f8; text-align: left; cursor: pointer; }
.conversation-row.selected { background: #fff; }
.conversation-row:active { background: #fff; }
.avatar { position: relative; width: 50px; height: 50px; overflow: visible; border-radius: 6px; background: #e7e7e7; box-shadow: 0 5px 14px rgb(0 0 0 / 5%); }
.avatar img { width: 100%; height: 100%; display: block; border-radius: 6px; object-fit: cover; }
.avatar-fallback { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 6px; background: #e8dfda; font-size: 28px; }
.avatar.system { display: grid; place-items: center; color: #444; background: #fff; }
.avatar.system svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.unread { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 10px; color: #fff; background: #ff4e61; font-size: 11px; font-weight: 700; line-height: 1; }
.conversation-copy { min-width: 0; align-self: start; padding-top: 1px; }
.conversation-name { display: block; overflow: hidden; color: #444; font-size: 18px; font-weight: 700; line-height: 23px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-preview { display: block; margin-top: 4px; overflow: hidden; color: #909090; font-size: 15px; line-height: 19px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-preview strong { color: #555; font-weight: 650; }
.conversation-time { align-self: start; padding-top: 4px; color: #b3b3b3; font-size: 13px; white-space: nowrap; }

.chat-detail-view { z-index: 5; background: #f7f7f8; }
.detail-toolbar {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 8px;
  padding: var(--safe-top) 14px 0;
  border-bottom: 0;
  box-shadow: none;
}
/* 名字和状态整体绝对居中：以工具栏（=整屏）宽度为基准，与左右胶囊的宽度无关，
   这样左边一个按钮、右边两个按钮时中轴线也不会被挤偏。 */
.detail-title-block { position: absolute; left: 50%; transform: translateX(-50%); top: var(--safe-top); bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; max-width: calc(100% - 184px); pointer-events: none; }
.detail-toolbar h1 { max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.detail-toolbar .toolbar-capsule-left, .detail-toolbar .toolbar-capsule-right { z-index: 1; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px rgb(255 255 255 / 70%); flex: 0 0 auto; }
.detail-status-row { display: flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; }
.status-text { overflow: hidden; color: #8e8e93; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.status-dot.status-idle { background: #34c759; }
.status-dot.status-busy { background: #ff9500; }
.status-dot.status-dnd { background: #3478f6; }
.dnd-notice { width: fit-content; max-width: 86%; margin: 4px auto 12px; padding: 8px 14px; border-radius: 14px; color: #6b6b6b; background: #fff; font-size: 12px; text-align: center; }
.dnd-notice button { margin-left: 6px; padding: 3px 10px; border: 0; border-radius: 999px; background: #f0f0f2; color: #3a3a3c; font-size: 11px; cursor: pointer; }
.dnd-notice button:active { opacity: .7; }
.toolbar-capsule { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 55%); background: rgb(232 232 236 / 55%); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%), 0 8px 20px rgb(0 0 0 / 8%); }
.capsule-icon-button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: #444; background: transparent; cursor: pointer; transition: transform .12s ease, opacity .12s ease; }
.capsule-icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.capsule-icon-button[hidden] { display: none; }
.capsule-icon-button:active { transform: scale(0.86); opacity: 0.7; }
.toolbar-capsule .character-settings-button { position: static; right: auto; width: 34px; height: 34px; }
.chat-exit-button svg { transform: rotate(45deg); }
.character-settings-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.message-area { position: absolute; inset: 0 0 calc(78px + var(--safe-bottom)); overflow-y: auto; padding: calc(62px + var(--safe-top)) 14px 20px; background: #f7f7f8; }
.message-date { margin: 16px 0 18px; color: #aaa; font-size: 12px; text-align: center; }
.notice-message { max-width: 82%; margin: 0 auto 16px; padding: 13px 18px; border: 1px solid #e8e4df; border-radius: 999px; color: #555; background: #fff; font-size: 15px; line-height: 1.55; }
.bubble { width: fit-content; max-width: min(100%, 520px); margin: 0 0 12px; padding: 10px 18px; border-radius: 999px; color: #454545; background: #fff; box-shadow: 0 2px 8px rgb(100 60 75 / 6%); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.bubble.self { margin-left: auto; color: #fff; background: #2f2f2f; }
.bubble:not(.self) { background: var(--character-bubble, #fff); }
.bubble.self { color: #fff; background: var(--character-self-bubble, #2f2f2f); }
.message-row { display: grid; grid-template-columns: 38px minmax(0, 78%); align-items: start; gap: 9px; margin-bottom: 12px; }
.message-row.self-row { grid-template-columns: minmax(0, 78%) 38px; justify-content: end; }
.message-avatar { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; color: #fff; background: #a36b79; font-size: 15px; font-weight: 750; }
.message-avatar img { position: relative; z-index: 1; grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.message-avatar span { grid-area: 1 / 1; }
.message-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.self-row .message-avatar { grid-column: 2; }
.self-row .message-body { grid-column: 1; grid-row: 1; align-items: flex-end; }
.message-row .bubble { margin-bottom: 2px; }
.message-row time { color: #aaa; font-size: 10px; padding: 0 4px; }
.hide-bubbles .message-row .bubble, .hide-bubbles .message-row .bubble.self { color: #454545; background: transparent; box-shadow: none; }
.hide-message-times .message-date { display: none; }
.square-avatar .avatar, .square-avatar .avatar img, .square-avatar .avatar-fallback, .square-avatar .message-avatar { border-radius: 0; }
.failed-row .bubble { position: relative; color: #555; background: #fff; }
.failed-mark { width: 18px; height: 18px; margin-right: 6px; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; background: #ef3340; font-size: 13px; font-weight: 800; vertical-align: -1px; }
.blocked-hint { margin-top: 2px; color: #ef3340; font-size: 11px; }
.typing-indicator { width: fit-content; margin: 4px 0 12px; padding: 8px 16px; border-radius: 999px; color: #929292; background: #fff; font-size: 12px; }
.message-composer { position: absolute; right: 12px; bottom: calc(12px + var(--safe-bottom)); left: 12px; z-index: 10; height: 64px; padding: 6px 10px 6px 18px; display: flex; align-items: center; gap: 10px; border: 1px solid rgb(255 255 255 / 55%); border-radius: 999px; background: rgb(232 232 236 / 55%); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%), 0 8px 20px rgb(0 0 0 / 8%); transition: bottom .2s ease; }
/* 功能面板高度 = var(--function-h)，输入栏要整条抬到它上面，多留 10px 不贴边 */
.chat-phone.functions-open .message-composer { bottom: calc(var(--function-h) + 10px); }
.chat-phone.functions-open .message-area { bottom: calc(var(--function-h) + 84px); }
.chat-phone.functions-open .message-composer input { color: var(--function-text); }
.chat-phone.functions-open .message-composer .composer-icon { color: var(--function-text); }
.composer-icon { width: 34px; padding: 0; border: 0; color: #666; background: transparent; font-size: 25px; cursor: pointer; }
.message-composer input { min-width: 0; flex: 1; height: 100%; border: 0; border-radius: 999px; padding: 0 10px; outline: 0; color: #444; background: transparent !important; font-size: 17px; }
.message-composer input:focus { box-shadow: none; }
.message-composer button { width: 44px; border: 0; border-radius: 9px; color: #fff; background: #2f2f2f; font-size: 23px; cursor: pointer; transition: transform .12s ease, opacity .12s ease; }
.message-composer .send-button { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; font-size: 19px; }
.message-composer .composer-icon { width: 32px; color: #666; background: transparent; }
.message-composer button:active { transform: scale(0.88); opacity: 0.75; }
.message-image { display: block; max-width: 160px; border-radius: 10px; cursor: zoom-in; }
/* 必须限定 [open]：dialog 未打开时浏览器默认 display:none，而作者样式里的
   display:grid 优先级更高，会把它一直摊成一层 100vw×100vh 的透明遮罩盖在聊天上，
   于是整页点不动也滑不动（只有输入框在它上面还能用）。 */
.image-lightbox[open] { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.image-lightbox:not([open]) { display: none; }
.image-lightbox::backdrop { background: rgba(18, 16, 17, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.image-lightbox img { display: block; width: auto; height: auto; max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 12px; }
.image-lightbox-close { position: fixed; top: 16px; right: 16px; z-index: 1; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; color: #fff; background: rgba(20, 18, 19, .58); font: 300 25px/1 system-ui, sans-serif; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* 朋友圈：时间行右侧「••」唤出深色赞/评论胶囊，赞和评论落在下面一块浅灰区 */
.social-post-actions { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.social-post-time { color: var(--app-muted); font-size: 12px; }
.social-post-action-wrap { display: flex; align-items: center; gap: 8px; }
.social-post-action-pill { display: flex; align-items: center; height: 34px; padding: 0 4px; border-radius: 8px; background: #4c4c4c; box-shadow: 0 4px 14px rgb(0 0 0 / 18%); }
.social-post-action-pill[hidden] { display: none; }
.social-post-action-pill button { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px; border: 0; color: #fff; background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; }
.social-post-action-pill button.liked { color: #ff8f94; }
.social-post-action-pill i { width: 1px; height: 17px; background: rgb(255 255 255 / 28%); }
.social-post-action-pill svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social-post-more { width: 34px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; color: var(--app-muted); background: var(--app-surface); font-size: 15px; line-height: 1; letter-spacing: 2px; cursor: pointer; }
.social-post-social { margin-top: 8px; border-radius: 8px; background: color-mix(in srgb, var(--app-surface), var(--app-text) 4%); overflow: hidden; }
.social-post-social:empty { display: none; }
.social-post-likes { display: flex; align-items: center; gap: 7px; padding: 9px 12px; color: var(--app-accent); font-size: 13.5px; font-weight: 700; }
.social-post-likes svg { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-post-likes + .social-post-comment-list { border-top: 1px solid var(--app-border); }
.social-post-comment-list { margin: 0; padding: 9px 12px; background: transparent; font-size: 13.5px; color: var(--app-text); }
.social-post-comment-list p { margin: 0 0 6px; line-height: 1.5; }
.social-post-comment-list p:last-child { margin-bottom: 0; }
.social-post-comment-list strong { color: var(--app-accent); font-weight: 700; }
.social-comment-image { display: block; max-width: 120px; margin-top: 5px; border-radius: 6px; }
.social-comment-expand { margin-top: 4px; border: 0; padding: 0; color: var(--app-accent); background: transparent; font-size: 13px; cursor: pointer; }
.social-post-comment-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; position: relative; border-radius: 8px; background: color-mix(in srgb, var(--app-surface), var(--app-text) 4%); }
.social-post-comment-row[hidden] { display: none; }
.social-post-comment-row input { flex: 1; min-width: 0; height: 36px; border: 0; border-left: 2px solid #34c759; border-radius: 6px; padding: 0 10px; color: var(--app-text); background: var(--app-card); font-size: 16px; }
.social-post-comment-row input:focus { outline: 0; }
.social-post-comment-row .social-post-comment-tool { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 0; padding: 0; color: var(--app-text); background: transparent; cursor: pointer; }
.social-post-comment-row .social-post-comment-tool svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.social-post-comment-row button[type="submit"] { height: 30px; border: 0; border-radius: 6px; background: var(--app-accent); color: #fff; font-size: 13px; padding: 0 12px; cursor: pointer; }
.social-post-comment-pending { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.social-post-comment-pending img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.social-post-comment-pending button { border: 0; border-radius: 6px; padding: 3px 7px; color: var(--app-muted); background: var(--app-card); font-size: 12px; cursor: pointer; }
.social-post-emoji-popover { position: absolute; bottom: 52px; right: 0; z-index: 5; display: flex; flex-wrap: wrap; width: 204px; max-height: 220px; padding: 6px; overflow-y: auto; border-radius: 10px; background: var(--app-card); box-shadow: 0 6px 20px rgb(0 0 0 / 15%); }
.social-post-emoji-popover[hidden] { display: none; }
.social-post-emoji-popover button { width: 30px; height: 30px; border: 0; background: transparent; font-size: 17px; cursor: pointer; }
.voice-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.add-composer-button { font-size: 31px; font-weight: 300; line-height: 1; }
.chat-detail-view { --function-h: 33.333%; }
.chat-functions { position: absolute; right: 0; bottom: 0; left: 0; z-index: 9; height: var(--function-h); overflow: hidden; padding: 10px 20px calc(20px + var(--safe-bottom)); color: var(--function-text); background: var(--function-surface); border-top: 1px solid var(--function-border); }
.voice-call-sheet{position:absolute;inset:0;z-index:30;display:grid;place-items:center;overflow:hidden;background:#17191b;color:#fff}.voice-call-sheet[hidden]{display:none}.voice-call-backdrop{position:absolute;inset:-28px;background:linear-gradient(145deg,#2b2926,#101317 62%,#25211e);filter:blur(25px);opacity:.82}.voice-call-panel{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:calc(20px + var(--safe-top)) 24px calc(32px + var(--safe-bottom));text-align:center;background:rgb(7 9 11 / 30%)}.voice-call-panel header{display:flex;align-items:center;justify-content:center;width:100%;min-height:28px;color:#f2f2f2;font-size:14px}.voice-call-panel header i{position:absolute;right:7px;width:8px;height:8px;border-radius:50%;background:#6c716f}.voice-call-panel header i.active{background:#36d477;box-shadow:0 0 0 5px #36d47730}.voice-call-avatar{display:grid;place-items:center;width:106px;height:106px;margin-top:112px;border:1px solid #ffffff34;border-radius:16px;background-position:center;background-size:cover;background-color:#3c4643;color:#e9f4ee;font-size:42px;box-shadow:0 12px 32px #0005}.voice-call-panel h2{margin:48px 0 0;font-size:25px;font-weight:500;letter-spacing:0}.voice-call-panel p{margin:102px 0 0;color:#b7b8ba;font-size:17px}.voice-call-transcript{position:absolute;top:57%;width:80%;max-height:60px;overflow:auto;color:#ddd;font-size:13px}.voice-call-transcript:empty{display:none}.voice-call-actions{display:flex;align-items:center;justify-content:center;gap:112px}.incoming-actions{position:absolute;bottom:104px}.voice-call-actions button{width:68px;height:68px;padding:0;border:0;border-radius:50%;color:#fff;background:#ffffff18;font-size:27px;line-height:1;cursor:pointer}.voice-call-actions .reject-call{background:#fa5358;transform:rotate(135deg)}.voice-call-actions .accept-call{background:#12c86a;transform:rotate(-45deg)}.voice-call-labels{position:absolute;bottom:58px;display:flex;gap:138px;color:#d8d8d8;font-size:14px}.connected-actions{position:absolute;bottom:50px}.connected-actions .end-call{background:#fa5358;transform:rotate(135deg)}.voice-call-actions button:disabled{opacity:.42}
/* 功能面板：一页固定 2×4，多出来的功能往右滑。track 自己滚，dots 只是指示器。 */
.chat-function-track { position: absolute; inset: 14px 0 calc(30px + var(--safe-bottom)); display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.chat-function-track::-webkit-scrollbar { display: none; }
.chat-function-page { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: center; gap: 10px 14px; padding: 0 20px; }
.chat-function-page button { min-width: 0; min-height: 0; padding: 0; border: 0; color: #d0d0d0; background: transparent; cursor: pointer; }
/* 像素框：硬边 + 3px 粗描边 + 四角切口，里面的图标不动 */
.function-icon { width: min(62px, 100%); aspect-ratio: 1; margin: 0 auto 7px; display: grid; place-items: center; border: 3px solid var(--function-pixel-line); border-radius: 0; background: var(--function-card); clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px); }
.function-icon img { width: 56%; height: 56%; object-fit: contain; image-rendering: auto; }
.function-icon.function-emoji { font-size: 28px; line-height: 1; }
.chat-function-page strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.chat-function-page button:active .function-icon { transform: translate(1px, 1px); }
.chat-function-dots { position: absolute; bottom: calc(12px + var(--safe-bottom)); left: 0; right: 0; display: flex; justify-content: center; gap: 12px; opacity: 1; pointer-events: auto; }
.chat-function-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 0; background: #3b3b3b; cursor: pointer; }
.chat-function-dots button.active { background: #bdbdbd; }
.theme-day, .theme-soft, .theme-night, .theme-gray, .theme-blue, .theme-purple {
  --function-surface: var(--neutral-surface);
  --function-card: var(--neutral-surface-raised);
  --function-border: var(--border);
  --function-input: var(--neutral-surface-raised);
  --function-text: var(--text-primary);
  --function-pixel-line: color-mix(in srgb, var(--text-primary), transparent 74%);
}
.theme-day .function-icon img, .theme-soft .function-icon img { filter: brightness(0) saturate(100%); opacity: .72; }
.theme-day .chat-function-dots button, .theme-soft .chat-function-dots button { background: #c9c4bf; }
.theme-day .chat-function-dots button.active, .theme-soft .chat-function-dots button.active { background: #5b514a; }
.attachment-popover, .emoji-popover { position: absolute; bottom: 68px; z-index: 8; padding: 7px; border: 1px solid #dedede; border-radius: 10px; background: #fff; box-shadow: 0 9px 24px rgb(0 0 0 / 12%); }
.attachment-popover { left: 12px; display: grid; gap: 4px; }
.attachment-popover button { min-width: 68px; border: 0; border-radius: 6px; padding: 7px; color: #555; background: #f5f5f5; font-size: 13px; }
.emoji-popover { right: 52px; display: grid; grid-template-columns: repeat(4, 30px); gap: 4px; }
.emoji-popover button { width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; font-size: 19px; }

.chat-popover { position: absolute; top: calc(52px + var(--safe-top)); right: 24px; z-index: 7; width: 130px; overflow: hidden; border: 1px solid #dedede; border-radius: 10px; background: #fff; box-shadow: 0 9px 24px rgb(0 0 0 / 10%); }
.chat-popover.popover-anchored { right: auto; z-index: 16; }
.chat-popover button { width: 100%; height: 42px; border: 0; color: #555; background: #fff; font-size: 14px; text-align: left; cursor: pointer; }
.chat-popover button + button { border-top: 1px solid #e9e9e9; }
.chat-popover button:active { background: #f7f7f8; }

#sidebar-backdrop { position: absolute; inset: 0; z-index: 14; background: rgb(12 14 18 / 8%); opacity: 0; pointer-events: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: opacity 260ms ease; }
.chat-phone.sidebar-open #sidebar-backdrop { opacity: 1; pointer-events: auto; }
.chat-sidebar { position: absolute; top: 0; bottom: 0; left: 0; z-index: 15; width: 82%; max-width: 320px; display: flex; flex-direction: column; gap: 14px; padding: calc(18px + var(--safe-top)) 16px calc(18px + var(--safe-bottom)); border-right: 1px solid rgb(255 255 255 / 64%); background: rgb(238 240 244 / 42%); backdrop-filter: blur(38px) saturate(1.45); -webkit-backdrop-filter: blur(38px) saturate(1.45); box-shadow: inset -1px 0 0 rgb(255 255 255 / 28%), 12px 0 32px rgb(20 24 32 / 10%); transform: translateX(-100%); transition: transform 260ms ease; }
.chat-phone.sidebar-open .chat-sidebar { transform: translateX(0); }
.sidebar-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 999px; color: #666; background: rgb(255 255 255 / 38%); border: 1px solid rgb(255 255 255 / 52%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%); font-size: 14px; }
.sidebar-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #333; font-size: 16px; }
.sidebar-quick-links { display: grid; gap: 2px; }
.sidebar-quick-row { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px; border: 0; border-radius: 10px; color: #333; background: transparent; font-size: 15px; text-align: left; cursor: pointer; }
.sidebar-quick-row:active { background: rgb(0 0 0 / 5%); }
.sidebar-quick-icon { width: 26px; height: 26px; display: grid; place-items: center; color: #555; }
.sidebar-quick-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-recent-label { padding: 0 8px; color: #999; font-size: 12px; font-weight: 650; }
.sidebar-recent-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 2px; align-content: start; }
.sidebar-recent-row { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 8px; border: 0; border-radius: 10px; color: #333; background: transparent; font-size: 15px; text-align: left; cursor: pointer; }
.sidebar-recent-row:active { background: rgb(0 0 0 / 5%); }
.sidebar-recent-row .avatar { width: 36px; height: 36px; }
.sidebar-recent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-new-button { height: 44px; border: 1px solid rgb(255 255 255 / 52%); border-radius: 999px; color: #222; background: rgb(255 255 255 / 38%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%); font-size: 14px; font-weight: 650; cursor: pointer; }

.theme-night .chat-sidebar { border-right-color: rgb(255 255 255 / 18%); background: rgb(20 21 24 / 48%); }
.theme-night .sidebar-search, .theme-night .sidebar-new-button { border-color: rgb(255 255 255 / 14%); background: rgb(255 255 255 / 8%); color: var(--app-text); }
.theme-night .sidebar-search input { color: var(--app-text); }
.theme-night .sidebar-quick-row, .theme-night .sidebar-recent-row { color: var(--app-text); }
.theme-night .sidebar-quick-row:active, .theme-night .sidebar-recent-row:active { background: rgb(255 255 255 / 8%); }
.theme-night .sidebar-quick-icon { color: var(--app-muted); }
.theme-night .sidebar-recent-label { color: var(--app-muted); }

.app-tabbar { position: absolute; right: 0; bottom: 0; left: 0; z-index: 12; height: calc(68px + var(--safe-bottom)); padding: 7px 18px calc(7px + var(--safe-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--app-border); background: var(--app-card); }
.app-tabbar button { min-width: 0; display: grid; place-items: center; align-content: center; gap: 2px; border: 0; color: var(--app-muted); background: transparent; font-size: 11px; font-weight: 650; cursor: pointer; }
.app-tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-tabbar button.active { color: var(--app-accent); }
.moments-view { overflow-y: auto; padding-bottom: calc(68px + var(--safe-bottom)); }
.social-tabs{position:sticky;top:0;z-index:3;height:calc(46px + var(--safe-top));padding:calc(5px + var(--safe-top)) 20px 5px;display:grid;grid-template-columns:1fr 1fr;gap:5px;background:var(--app-card);border-bottom:1px solid var(--app-border)}.social-tabs button{border:0;border-radius:7px;color:var(--app-muted);background:transparent;font-weight:700}.social-tabs button.active{color:var(--app-text);background:var(--app-surface)}
.moments-cover { position: relative; height: calc(250px + var(--safe-top)); background: linear-gradient(145deg, var(--app-cover), color-mix(in srgb, var(--app-cover), #111 30%)); }
.moments-camera { position: absolute; top: calc(19px + var(--safe-top)); right: 20px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #fff; background: rgb(0 0 0 / 18%); cursor: pointer; }
.moments-camera svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.moments-back { position: absolute; top: calc(19px + var(--safe-top)); left: 20px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #fff; background: rgb(0 0 0 / 18%); font-size: 26px; line-height: 1; cursor: pointer; }
.moments-owner { position: absolute; right: 20px; bottom: -27px; display: flex; align-items: end; gap: 10px; color: #fff; font-size: 18px; }
.moments-avatar, .me-avatar { width: 62px; height: 62px; display: grid; place-items: center; overflow: hidden; border: 3px solid var(--app-surface); border-radius: 8px; color: #fff; background: #a36b79; font-size: 21px; font-weight: 750; }
.moments-empty { margin: 82px 0 0; color: var(--app-muted); font-size: 15px; text-align: center; }
.social-feed{padding:46px 20px 24px}.social-post{padding:16px 0;display:grid;grid-template-columns:44px 1fr;gap:12px;border-bottom:1px solid var(--app-border)}.social-post-avatar{width:44px;height:44px;display:grid;place-items:center;overflow:hidden;border-radius:7px;color:#fff;background:#a36b79;font-weight:800}.social-post-avatar img{width:100%;height:100%;object-fit:cover}.social-post-body{min-width:0}.social-post-body header{display:flex;align-items:center;justify-content:space-between}.social-post-body strong{font-size:15px}.social-post-body header small,.social-post-meta{color:var(--app-muted);font-size:11px}.social-post-body p{margin:8px 0;color:var(--app-text);font-size:14px;line-height:1.55;white-space:pre-wrap}.social-post-image{width:100%;max-height:260px;object-fit:cover;border-radius:7px;background:var(--app-surface)}.social-post-gallery{--wir-height:150px;--wir-radius:7px;margin:8px 0}.social-token{display:inline-block;margin-top:7px;padding:4px 7px;border-radius:5px;color:#806331;background:#fff4d8;font-size:10px}
#moment-composer-sheet textarea{width:100%;min-height:96px;margin-top:12px;padding:12px;border:1px solid var(--app-border);border-radius:8px;color:var(--app-text);background:var(--app-card);font:inherit;resize:vertical}
#moment-composer-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.moment-composer-thumb{position:relative;width:64px;height:64px;border-radius:7px;overflow:hidden}
.moment-composer-thumb img{width:100%;height:100%;object-fit:cover}
.moment-composer-thumb button{position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:50%;color:#fff;background:rgb(0 0 0 / 55%);font-size:12px;line-height:1;cursor:pointer}.family-card-upload{margin-top:14px;display:grid;gap:8px}.family-card-upload button{height:40px;border:1px solid var(--app-border);border-radius:8px;color:var(--app-text);background:var(--app-card);font-weight:700}.physical-card.has-custom-image,.family-notice-card.has-custom-image{background-size:cover;background-position:center}.physical-card.has-custom-image{position:relative;overflow:hidden}.physical-card.has-custom-image::before,.family-notice-card.has-custom-image::before{content:"";position:absolute;inset:0;background:#0005}.physical-card.has-custom-image>* ,.family-notice-card.has-custom-image>*{position:relative;z-index:1}
.me-view { overflow-y: auto; padding-top: var(--safe-top); padding-bottom: calc(68px + var(--safe-bottom)); }
.me-profile { width: 100%; min-height: 150px; padding: 40px 24px 30px; display: grid; grid-template-columns: 72px minmax(0, 1fr) 20px; align-items: center; gap: 16px; border: 0; border-bottom: 8px solid var(--app-surface); color: var(--app-text); background: var(--app-card); text-align: left; cursor: pointer; }
.me-avatar { width: 72px; height: 72px; border: 0; font-size: 25px; }
.me-profile-copy { min-width: 0; display: grid; gap: 8px; }
.me-profile-copy strong { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.me-profile-copy small { overflow: hidden; color: var(--app-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.row-arrow { color: var(--app-muted); font-size: 30px; font-weight: 300; line-height: 1; }
.me-menu { display: grid; background: var(--app-card); }
.me-menu button { min-height: 62px; padding: 0 22px; display: grid; grid-template-columns: 36px 1fr 20px; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--app-border); color: var(--app-text); background: transparent; text-align: left; font-size: 17px; cursor: pointer; }
.menu-icon { width: 26px; height: 26px; display: grid; place-items: center; }
.menu-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wallet-icon { color: #efaf25; }.card-icon { color: #4389d7; }.mask-icon { color: #a36b79; }
.profile-sheet, .mask-sheet { position: absolute; inset: 0; z-index: 30; display: grid; align-items: end; background: rgb(0 0 0 / 30%); }
.profile-sheet-panel, .mask-sheet-panel { max-height: 85%; overflow: auto; padding: 18px 20px calc(20px + var(--safe-bottom)); border-radius: 14px 14px 0 0; color: var(--app-text); background: var(--app-surface); }
.profile-sheet header, .mask-sheet header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.profile-sheet h2, .mask-sheet h2 { margin: 0; font-size: 19px; }.profile-sheet header button, .mask-sheet header button { border: 0; color: var(--app-muted); background: transparent; font-size: 25px; }
.profile-sheet label, .mask-form { display: grid; gap: 8px; margin-top: 14px; color: var(--app-muted); font-size: 13px; }
.profile-sheet input, .mask-form input, .mask-form textarea { width: 100%; border: 1px solid var(--app-border); border-radius: 8px; padding: 10px 12px; outline: 0; color: var(--app-text); background: var(--app-card); font: inherit; }
.profile-sheet input, .mask-form input { height: 44px; }.mask-form textarea { resize: vertical; line-height: 1.5; }
.profile-avatar-editor { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.profile-avatar-preview { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: #fff; background: #a36b79; font-size: 22px; font-weight: 750; }
.profile-avatar-preview img, .me-avatar img, .moments-avatar img { position: relative; z-index: 1; grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-preview span, .me-avatar span, .moments-avatar span { grid-area: 1 / 1; }
.profile-avatar-editor button { min-height: 38px; padding: 0 14px; border: 1px solid var(--app-border); border-radius: 8px; color: var(--app-text); background: var(--app-card); font-weight: 700; }
.color-setting input[type="color"] { width: 100%; height: 44px; padding: 4px; cursor: pointer; }
.profile-save, .mask-form button { width: 100%; height: 44px; margin-top: 20px; border: 0; border-radius: 8px; color: #fff; background: var(--app-accent); font-weight: 700; }
.mask-list { display: grid; gap: 8px; }.mask-item { min-height: 58px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-card); }.mask-item strong { font-size: 15px; }.mask-item small { display: block; max-width: 240px; margin-top: 4px; overflow: hidden; color: var(--app-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.mask-item button { border: 0; border-radius: 6px; padding: 7px 10px; color: var(--app-accent); background: color-mix(in srgb, var(--app-accent), transparent 88%); font-size: 12px; font-weight: 700; }
.group-avatar .avatar-fallback { color: #fff; background: #5b8f72; font-size: 18px; font-weight: 750; }
.group-form fieldset { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }.group-form legend { margin-bottom: 10px; color: var(--app-muted); font-size: 13px; }.group-members { display: grid; max-height: 260px; overflow: auto; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-card); }.group-members label { min-height: 50px; padding: 0 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--app-border); color: var(--app-text); font-size: 15px; }.group-members label:last-child { border-bottom: 0; }.group-members input { width: 20px; height: 20px; accent-color: var(--app-accent); }
.sheet-hint { color: var(--app-muted); font-size: 12px; line-height: 1.5; }.family-card-box { min-height: 66px; padding: 12px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-card); }.family-card-box div { display: grid; gap: 4px; }.family-card-box small { color: var(--app-muted); font-size: 12px; }.sheet-label { display: grid; gap: 8px; margin-top: 16px; color: var(--app-muted); font-size: 13px; }.sheet-label input, .sheet-label select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--app-border); border-radius: 8px; color: var(--app-text); background: var(--app-card); }
#backup-sheet .upload-button { width: 100%; height: 44px; margin-top: 12px; display: grid; place-items: center; border: 1px solid var(--app-border); border-radius: 8px; color: var(--app-text); background: var(--app-card); font-weight: 700; }
#backup-status { min-height: 16px; margin-top: 12px; }
.theme-night .chat-toolbar, .theme-night .conversation-tabs, .theme-night .conversation-row, .theme-night .message-composer { color: var(--app-text); background: var(--app-surface); border-color: var(--app-border); }.theme-night .chat-toolbar h1, .theme-night .toolbar-back, .theme-night .toolbar-icon, .theme-night .character-settings-button, .theme-night .conversation-name, .theme-night .message-composer input { color: var(--app-text); }.theme-night .message-area { background: var(--app-surface); }.theme-night .bubble { color: var(--app-text); background: var(--app-card); }.theme-night .conversation-preview, .theme-night .conversation-time { color: var(--app-muted); }
.theme-soft .chat-toolbar, .theme-soft .conversation-tabs, .theme-soft .conversation-row, .theme-soft .message-composer, .theme-day .chat-toolbar, .theme-day .conversation-tabs, .theme-day .conversation-row, .theme-day .message-composer, .theme-gray .chat-toolbar, .theme-gray .conversation-tabs, .theme-gray .conversation-row, .theme-gray .message-composer, .theme-blue .chat-toolbar, .theme-blue .conversation-tabs, .theme-blue .conversation-row, .theme-blue .message-composer, .theme-purple .chat-toolbar, .theme-purple .conversation-tabs, .theme-purple .conversation-row, .theme-purple .message-composer { color: var(--app-text); background: var(--app-surface); border-color: var(--app-border); }.theme-soft .chat-toolbar h1, .theme-soft .toolbar-back, .theme-soft .toolbar-icon, .theme-soft .character-settings-button, .theme-soft .conversation-name, .theme-soft .message-composer input, .theme-day .chat-toolbar h1, .theme-day .toolbar-back, .theme-day .toolbar-icon, .theme-day .character-settings-button, .theme-day .conversation-name, .theme-day .message-composer input, .theme-gray .chat-toolbar h1, .theme-gray .toolbar-back, .theme-gray .toolbar-icon, .theme-gray .character-settings-button, .theme-gray .conversation-name, .theme-gray .message-composer input, .theme-blue .chat-toolbar h1, .theme-blue .toolbar-back, .theme-blue .toolbar-icon, .theme-blue .character-settings-button, .theme-blue .conversation-name, .theme-blue .message-composer input, .theme-purple .chat-toolbar h1, .theme-purple .toolbar-back, .theme-purple .toolbar-icon, .theme-purple .character-settings-button, .theme-purple .conversation-name, .theme-purple .message-composer input { color: var(--app-text); }.theme-soft .message-area, .theme-day .message-area, .theme-gray .message-area, .theme-blue .message-area, .theme-purple .message-area { background: var(--app-surface); }.theme-soft .bubble, .theme-day .bubble, .theme-gray .bubble, .theme-blue .bubble, .theme-purple .bubble { color: var(--app-text); background: var(--app-card); }.theme-soft .conversation-preview, .theme-soft .conversation-time, .theme-day .conversation-preview, .theme-day .conversation-time, .theme-gray .conversation-preview, .theme-gray .conversation-time, .theme-blue .conversation-preview, .theme-blue .conversation-time, .theme-purple .conversation-preview, .theme-purple .conversation-time { color: var(--app-muted); }
.theme-day .bubble.self, .theme-soft .bubble.self, .theme-night .bubble.self, .theme-gray .bubble.self, .theme-blue .bubble.self, .theme-purple .bubble.self { color: #fff; background: #2f2f2f; }
.theme-day .bubble:not(.self), .theme-soft .bubble:not(.self), .theme-night .bubble:not(.self), .theme-gray .bubble:not(.self), .theme-blue .bubble:not(.self), .theme-purple .bubble:not(.self) { background: var(--character-bubble, var(--app-card)); }
.theme-day .bubble.self, .theme-soft .bubble.self, .theme-night .bubble.self, .theme-gray .bubble.self, .theme-blue .bubble.self, .theme-purple .bubble.self { background: var(--character-self-bubble, color-mix(in srgb, var(--app-accent), #000 35%)); }
.chat-phone .group-toggle,
.chat-phone .message-composer button:not(.composer-icon),
.chat-phone .profile-save,
.chat-phone .mask-form button { color: #fff; background: var(--theme-primary, var(--app-accent)); }
.chat-phone .conversation-tabs button.active,
.chat-phone .social-tabs button.active { color: var(--app-text); background: var(--theme-primary-soft, #eef1f0); }
.chat-phone .conversation-tabs,
.chat-phone .message-composer,
.chat-phone .chat-functions { border-color: var(--theme-primary-border, var(--app-border)); }
.chat-phone .message-composer input:focus { border-color: transparent; box-shadow: none; }
.chat-phone .message-composer input { background: transparent; }
.chat-phone .app-tabbar button.active { color: var(--theme-primary, var(--app-accent)); }
.chat-phone .mask-item button { color: var(--theme-primary, var(--app-accent)); background: var(--theme-primary-muted, #f1f4f2); }
.chat-phone .function-icon { background: color-mix(in srgb, var(--theme-primary, var(--app-accent)) 14%, var(--function-surface)); }

/* Keep the chat surfaces on the same restrained palette in both modes. */
.theme-day {
  --app-surface: #f0efeb;
  --app-card: #f5f1e9;
  --app-border: #d8d5ce;
  --app-text: #292827;
  --app-muted: #6f6c67;
  --app-accent: #4d8a68;
}
.theme-day .chat-list-view,
.theme-day .chat-detail-view,
.theme-day .app-view,
.theme-day .message-area,
.theme-day .conversation-row,
.theme-day .conversation-tabs,
.theme-day .message-composer { background: var(--app-surface); }
.theme-day .chat-toolbar,
.theme-day .conversation-row.selected,
.theme-day .notice-message,
.theme-day .bubble,
.theme-day .typing-indicator { background: var(--app-card); }
.theme-day .chat-toolbar,
.theme-day .conversation-tabs,
.theme-day .message-composer,
.theme-day .notice-message { border-color: var(--app-border); }
.theme-day .chat-toolbar h1,
.theme-day .toolbar-back,
.theme-day .toolbar-icon,
.theme-day .character-settings-button,
.theme-day .conversation-name,
.theme-day .conversation-preview strong,
.theme-day .message-composer input { color: var(--app-text); }
.theme-day .conversation-preview,
.theme-day .conversation-time,
.theme-day .message-date,
.theme-day .message-row time { color: var(--app-muted); }
.theme-day .bubble:not(.self),
.theme-day .notice-message { color: var(--app-text); }

.theme-night .chat-list-view,
.theme-night .chat-detail-view,
.theme-night .app-view,
.theme-night .message-area,
.theme-night .conversation-row,
.theme-night .conversation-tabs,
.theme-night .message-composer { background: var(--app-surface); }
.theme-night .chat-toolbar,
.theme-night .conversation-row.selected,
.theme-night .notice-message,
.theme-night .bubble,
.theme-night .typing-indicator { background: var(--app-card); }
.theme-day .chat-search,
.theme-day .chat-popover,
.theme-day .attachment-popover,
.theme-day .emoji-popover,
.theme-day .avatar.system { background: var(--app-card); border-color: var(--app-border); }
.theme-day .chat-popover button,
.theme-day .attachment-popover button,
.theme-day .emoji-popover button { color: var(--app-text); background: transparent; }
.theme-night .chat-search,
.theme-night .chat-popover,
.theme-night .attachment-popover,
.theme-night .emoji-popover,
.theme-night .avatar.system { color: var(--app-text); background: var(--app-card); border-color: var(--app-border); }
.theme-night .chat-popover button,
.theme-night .attachment-popover button,
.theme-night .emoji-popover button { color: var(--app-text); background: transparent; }

/* Frosted-glass surfaces: neutral iOS-material glass (no theme-color tint), heavy blur/saturate so whatever's behind reads as flat gray — matches the iOS folder-glass reference for both 浅色 and 深色. */
.theme-day .chat-toolbar,
.theme-day .conversation-tabs,
.theme-day .app-tabbar,
.theme-day .chat-search,
.theme-day .chat-popover,
.theme-day .attachment-popover,
.theme-day .emoji-popover,
.theme-day .chat-functions,
.theme-day .message-composer {
  background: rgb(232 232 236 / 55%);
  border-color: rgb(255 255 255 / 55%);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%), 0 8px 20px rgb(0 0 0 / 8%);
}
.theme-night .chat-toolbar,
.theme-night .conversation-tabs,
.theme-night .app-tabbar,
.theme-night .chat-search,
.theme-night .chat-popover,
.theme-night .attachment-popover,
.theme-night .emoji-popover,
.theme-night .chat-functions,
.theme-night .message-composer {
  background: rgb(142 142 150 / 32%);
  border-color: rgb(255 255 255 / 14%);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 8px 24px rgb(0 0 0 / 35%);
}
.detail-toolbar {
  height: calc(50px + var(--safe-top));
  background: transparent;
  box-shadow: none;
  border: 0;
}
.chat-phone .detail-toolbar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.detail-toolbar-blur { position: absolute; top: 0; left: 0; right: 0; z-index: 4; height: calc(150px + var(--safe-top)); overflow: hidden; pointer-events: none; }
.detail-toolbar-blur span { position: absolute; inset: 0; display: block; }
.detail-toolbar-blur span:nth-child(1) { backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 12%, transparent 26%); mask-image: linear-gradient(to bottom, #000 0%, #000 12%, transparent 26%); }
.detail-toolbar-blur span:nth-child(2) { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 42%); mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 42%); }
.detail-toolbar-blur span:nth-child(3) { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 60%); mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 60%); }
.detail-toolbar-blur span:nth-child(4) { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 80%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 80%); }
.detail-toolbar-blur span:nth-child(5) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); background: linear-gradient(to bottom, rgb(247 247 248 / 45%), transparent); }
.theme-night .detail-toolbar-blur span:nth-child(5) { background: linear-gradient(to bottom, rgb(20 20 22 / 45%), transparent); }

[hidden] { display: none !important; }
.chat-status { display: none !important; }

.gift-view { position:absolute; inset:0; z-index:20; overflow:hidden auto; color:#171717; background:#fff; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC",sans-serif; }
.gift-toolbar { height:calc(86px + var(--safe-top)); padding:calc(18px + var(--safe-top)) 35px 0 38px; display:flex; align-items:flex-start; justify-content:space-between; background:#faf8f2; }
.gift-back { width:34px; height:42px; padding:0; border:0; color:#171717; background:transparent; font-size:46px; font-weight:200; line-height:32px; cursor:pointer; }
.gift-cart { position:relative; font-size:39px; line-height:32px; transform:rotate(180deg); }
.gift-cart i { position:absolute; right:1px; bottom:-4px; width:5px; height:5px; border-radius:50%; background:#171717; box-shadow:-27px 0 #171717; }
.gift-heading { min-height:155px; padding:21px 39px 17px; display:flex; align-items:center; justify-content:space-between; background:#faf8f2; }
.gift-heading h1 { margin:0 0 29px; font-size:34px; letter-spacing:1px; line-height:1.1; }
.gift-heading p { margin:0; color:#777; font-size:22px; }.gift-heading p strong { color:#586b88; font-weight:600; }
.gift-avatar { width:61px; height:61px; display:grid; place-items:center; overflow:hidden; border-radius:12px; color:#fff; background:#a36b79; font-size:27px; }.gift-avatar img { width:100%; height:100%; object-fit:cover; }
.gift-search { height:57px; margin:25px 40px 26px; padding:0 24px; display:flex; align-items:center; gap:15px; border-radius:13px; background:#f3f3f3; color:#aaa; }.gift-search span { font-size:37px; font-weight:200; line-height:1; }.gift-search input { min-width:0; flex:1; border:0; outline:0; color:#555; background:transparent; font-size:22px; }.gift-search input::placeholder { color:#aaa; }
.gift-tabs { height:54px; padding:0 60px; display:flex; align-items:center; gap:37px; white-space:nowrap; }.gift-tabs button,.gift-chips button { position:relative; padding:0; border:0; color:#858585; background:transparent; font-size:21px; cursor:pointer; }.gift-tabs button.active { color:#111; font-weight:700; }.gift-dot { position:absolute; top:-2px; right:-10px; width:10px; height:10px; border-radius:50%; background:#f05b62; }.gift-filter { margin-left:auto; }
.gift-chips { height:72px; padding:0 39px; display:flex; align-items:center; gap:24px; overflow:hidden; white-space:nowrap; }.gift-chips button { padding:7px 16px; border-radius:24px; background:#f7f7f7; }.gift-chips button.active { color:#111; background:#f0f0f0; }
.gift-list { padding:7px 40px 36px; }.gift-item { display:grid; grid-template-columns:330px minmax(0,1fr); gap:31px; min-height:300px; padding:0 0 43px; margin-bottom:35px; }.gift-item>img { width:330px; height:330px; object-fit:cover; border-radius:10px; background:#f6f2ee; }.gift-info { min-width:0; padding-top:8px; display:flex; flex-direction:column; }.gift-info h2 { margin:0 0 15px; font-size:24px; font-weight:500; line-height:1.25; }.gift-info p { margin:0; color:#c9994b; font-size:21px; line-height:1.6; }.gift-bottom { margin-top:auto; display:flex; align-items:center; gap:15px; }.gift-bottom strong { color:#c7954a; font-size:31px; white-space:nowrap; }.gift-bottom strong small { margin-left:6px; font-size:17px; font-weight:500; }.gift-heart,.gift-select { height:60px; border:0; border-radius:13px; background:#fafafa; cursor:pointer; }.gift-heart { width:70px; color:#111; font-size:39px; font-weight:200; }.gift-select { min-width:123px; padding:0 18px; color:#111; font-size:22px; font-weight:700; }
@media (max-width:480px) { .gift-toolbar { height:calc(68px + var(--safe-top)); padding:calc(15px + var(--safe-top)) 24px 0 24px; }.gift-heading { min-height:139px; padding:18px 24px 15px; }.gift-heading h1 { margin-bottom:21px; font-size:27px; }.gift-heading p { font-size:17px; }.gift-avatar { width:53px; height:53px; }.gift-search { margin:18px 24px 18px; height:52px; padding:0 17px; }.gift-search input { font-size:18px; }.gift-tabs { gap:23px; padding:0 24px; overflow:auto; }.gift-tabs button,.gift-chips button { font-size:17px; }.gift-chips { padding:0 24px; gap:10px; }.gift-list { padding:7px 24px 30px; }.gift-item { grid-template-columns:128px minmax(0,1fr); gap:15px; min-height:128px; padding-bottom:18px; margin-bottom:19px; }.gift-item>img { width:128px; height:128px; border-radius:7px; }.gift-info h2 { margin-bottom:7px; font-size:16px; }.gift-info p { font-size:14px; line-height:1.35; }.gift-bottom { gap:5px; }.gift-bottom strong { font-size:20px; }.gift-bottom strong small { font-size:12px; }.gift-heart { width:39px; height:39px; font-size:27px; }.gift-select { min-width:68px; height:39px; padding:0 8px; font-size:15px; } }
.money-view { position:absolute; inset:0; z-index:25; overflow:hidden; color:#eee; background:#101010; }.money-view header { height:calc(95px + var(--safe-top)); padding:calc(22px + var(--safe-top)) 40px 0; display:flex; align-items:flex-start; justify-content:space-between; }.money-view header button { border:0; color:#eee; background:transparent; font-size:48px; line-height:32px; }.money-view header h1 { margin:10px 0 0; font-size:30px; }.money-view header span { font-size:25px; letter-spacing:4px; }.money-fields { margin:44px 40px 0; display:grid; gap:18px; }.money-fields label,.money-fields>button { min-height:86px; padding:24px 40px; display:flex; align-items:center; gap:18px; border:0; border-radius:8px; color:#eee; background:#1b1b1b; font-size:27px; text-align:left; }.money-fields label input { min-width:0; flex:1; border:0; outline:0; color:#eee; background:transparent; font-size:27px; }.money-fields label input::placeholder { color:#555; }.money-fields label span { color:#888; }.money-fields>button { justify-content:space-between; }.money-fields>button i { font-size:38px; font-style:normal; }.money-total { margin-top:190px; text-align:center; font-size:56px; }.money-total strong { font-size:90px; }.money-submit { display:block; width:48%; height:83px; margin:62px auto 0; border:0; border-radius:12px; color:#fff; background:#07c160; font-size:27px; font-weight:700; }.money-foot { position:absolute; bottom:50px; width:100%; color:#777; text-align:center; font-size:18px; }.money-card { display:grid; gap:8px; min-width:210px; padding:15px; color:#fff; }.money-card.red { background:#d85c45; }.money-card.transfer { background:#f1f1f1; color:#333; }.money-card strong { font-size:25px; }.money-card small { font-size:13px; opacity:.8; }

@media (max-width: 480px) {
  :root, body { background: #f7f7f8; }
  .chat-phone { width: 100vw; height: 100vh; aspect-ratio: auto; box-shadow: none; }
}

/* Final reference sizing: the money screens use the same compact 393x852 frame. */
.money-view { position:absolute; inset:0; background:#101010; color:#ededed; }
.money-view header { height:62px; padding:14px 16px 0; }
.money-view header button { width:30px; padding:0; font-size:38px; line-height:28px; font-weight:300; }
.money-view header h1 { margin:2px 0 0; font-size:23px; line-height:28px; font-weight:700; }
.money-view header span { margin-top:2px; font-size:16px; line-height:20px; letter-spacing:2px; }
.money-fields { margin:25px 16px 0; gap:13px; }
.money-fields label,.money-fields>button { min-height:69px; padding:18px 17px; border-radius:6px; background:#1a1a1a; font-size:19px; line-height:25px; }
.money-fields label input { font-size:19px; line-height:25px; }
.money-fields label input::placeholder { color:#555; }
.money-fields label span { font-size:22px; }
.money-fields>button i { font-size:28px; }
.money-total { margin-top:90px; color:#e6e6e6; font-size:29px; line-height:66px; }
.money-total strong { font-size:57px; line-height:66px; font-weight:500; }
.money-submit { width:47%; height:55px; margin:30px auto 0; border-radius:8px; background:#ff624d; font-size:19px; line-height:55px; }
.money-foot { bottom:24px; color:#777; font-size:14px; line-height:20px; }
/* family card */
.physical-card{margin:4px 0 14px;min-height:154px;padding:20px;display:flex;justify-content:space-between;border-radius:14px;color:#fff;background:linear-gradient(135deg,#2e6fca,#7aa8e8);box-shadow:0 8px 18px #2e6fca44}.physical-card div{display:grid;gap:10px}.physical-card small{font-size:10px;opacity:.75;letter-spacing:1px}.physical-card strong{font-size:24px}.physical-card span{font-size:14px;letter-spacing:2px;align-self:end}.physical-card>b{font-size:30px}.family-card-state{margin-bottom:10px;color:var(--app-accent);font-size:13px;font-weight:700}.family-card-actions{display:flex;gap:8px;margin-top:16px}.family-card-actions button{flex:1;height:38px;border:1px solid var(--app-border);border-radius:8px;color:#c65a5a;background:var(--app-card)}
.physical-card.theme-pink{background:linear-gradient(135deg,#d86e9b,#f2b4c9)}.physical-card.theme-black{background:linear-gradient(135deg,#202124,#555)}.physical-card.theme-gold{background:linear-gradient(135deg,#a87828,#e7c66d)}
.family-card-hint{margin:0;color:var(--app-muted);font-size:12px;line-height:1.5}.family-notice-card{display:grid;gap:12px;min-width:245px;padding:15px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#2e6fca,#7aa8e8);box-shadow:0 6px 14px #2e6fca33}.family-notice-card.theme-pink{background:linear-gradient(135deg,#d86e9b,#f2b4c9)}.family-notice-card.theme-black{background:linear-gradient(135deg,#202124,#555)}.family-notice-card.theme-gold{background:linear-gradient(135deg,#a87828,#e7c66d)}.family-notice-card header{display:flex;align-items:center;justify-content:space-between}.family-notice-card header strong{font-size:16px}.family-notice-card header small{font-size:10px;opacity:.75;letter-spacing:1px}.family-notice-card p{margin:0;font-size:13px;line-height:1.45}.family-notice-card span{font-size:14px;letter-spacing:1.5px}

/* Wallet page */
.wallet-view { position:absolute; inset:0; z-index:26; overflow:hidden; background:var(--app-surface); color:var(--app-text); font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC",sans-serif; }
.wallet-toolbar { position:relative; height:calc(56px + var(--safe-top)); padding-top:var(--safe-top); display:flex; align-items:center; justify-content:space-between; padding-left:16px; padding-right:16px; border-bottom:1px solid rgb(255 255 255 / 55%); background:rgb(232 232 236 / 55%); backdrop-filter:blur(30px) saturate(1.5); -webkit-backdrop-filter:blur(30px) saturate(1.5); }
.wallet-toolbar h1 { margin:0; font-size:17px; font-weight:700; }
.wallet-toolbar button { width:34px; height:34px; padding:0; border:0; display:grid; place-items:center; color:var(--app-text); background:transparent; }
.wallet-toolbar button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wallet-toolbar #wallet-back, .wallet-toolbar #me-back { font-size:30px; line-height:1; }
.wallet-scroll { height:calc(100% - 56px - var(--safe-top)); overflow-y:auto; padding:16px 16px calc(24px + var(--safe-bottom)); }
.wallet-hero { padding:20px; border-radius:22px; color:#f4f4f5; background:linear-gradient(135deg,#2c2f3a,#15161b); box-shadow:0 14px 30px rgb(0 0 0 / 25%); }
.wallet-hero-top { display:flex; align-items:center; justify-content:space-between; }
.wallet-hero-icon { width:30px; height:30px; display:grid; place-items:center; color:#f4f4f5; opacity:.9; }
.wallet-hero-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }
.wallet-hero-tag { font-size:12px; font-weight:600; letter-spacing:.5px; color:rgb(244 244 245 / 78%); }
.wallet-hero > small { display:block; margin-top:22px; color:rgb(244 244 245 / 60%); font-size:11px; font-weight:600; letter-spacing:1px; }
.wallet-hero > strong { display:block; margin-top:6px; font-size:32px; font-weight:750; letter-spacing:.2px; }
.wallet-hero-bottom { margin-top:26px; display:flex; align-items:center; justify-content:space-between; }
.wallet-hero-id { display:flex; flex-direction:column; gap:4px; font-size:13px; color:rgb(244 244 245 / 82%); }
.wallet-hero-id #wallet-card-no { letter-spacing:1.5px; color:rgb(244 244 245 / 60%); }
#wallet-hero-action { width:40px; height:40px; border:1px solid rgb(255 255 255 / 45%); border-radius:50%; color:#fff; background:rgb(255 255 255 / 12%); }
#wallet-hero-action svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wallet-stats { margin-top:16px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.wallet-stat { padding:16px; border-radius:18px; border:1px solid rgb(255 255 255 / 55%); background:rgb(232 232 236 / 55%); box-shadow:inset 0 1px 0 rgb(255 255 255 / 65%), 0 8px 20px rgb(0 0 0 / 8%); backdrop-filter:blur(30px) saturate(1.5); -webkit-backdrop-filter:blur(30px) saturate(1.5); }
.wallet-stat-icon { display:grid; place-items:center; width:26px; height:26px; color:var(--app-accent); font-weight:700; }
.wallet-stat-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wallet-stat small { display:block; margin-top:10px; color:var(--app-muted); font-size:12px; }
.wallet-stat strong { display:block; margin-top:4px; font-size:17px; font-weight:700; color:var(--app-text); }
.wallet-bill-header { margin-top:22px; display:flex; align-items:center; justify-content:space-between; }
.wallet-bill-header h2 { margin:0; font-size:16px; font-weight:700; }
.wallet-bill-header span { padding:2px 10px; border-radius:20px; color:var(--app-muted); background:rgb(142 142 150 / 16%); font-size:12px; font-weight:600; }
.wallet-bill-list { margin-top:10px; }
.wallet-bill-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 4px; border-bottom:1px solid var(--divider); }
.wallet-bill-left { display:grid; gap:3px; }
.wallet-bill-left strong { font-size:14px; font-weight:700; color:var(--app-text); }
.wallet-bill-left span { font-size:12px; color:var(--app-muted); }
.wallet-bill-left small { font-size:11px; color:var(--text-tertiary); }
.wallet-bill-right { display:grid; justify-items:end; gap:3px; }
.wallet-bill-right strong { font-size:14px; font-weight:700; }
.wallet-bill-right strong.expense { color:var(--app-text); }
.wallet-bill-right strong.income { color:var(--accent-dark); }
.wallet-bill-right span { padding:1px 8px; border-radius:20px; color:var(--app-muted); background:rgb(142 142 150 / 14%); font-size:11px; }

.theme-night .wallet-toolbar { background:rgb(142 142 150 / 32%); border-color:rgb(255 255 255 / 14%); backdrop-filter:blur(30px) saturate(1.6); -webkit-backdrop-filter:blur(30px) saturate(1.6); }
.theme-night .wallet-stat { background:rgb(142 142 150 / 32%); border-color:rgb(255 255 255 / 14%); box-shadow:inset 0 1px 0 rgb(255 255 255 / 16%), 0 8px 24px rgb(0 0 0 / 35%); backdrop-filter:blur(30px) saturate(1.6); -webkit-backdrop-filter:blur(30px) saturate(1.6); }

/* Shared iOS-style glass headers: content remains visible beneath the fade. */
.chat-toolbar {
  border-bottom: 0;
  background: rgb(247 247 248 / 54%);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: 0 8px 24px rgb(30 28 26 / 6%);
}
.chat-toolbar::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 82px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(247 247 248 / 34%), rgb(247 247 248 / 12%) 34%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 100%);
}
.detail-toolbar { background: rgb(247 247 248 / 30%); box-shadow: none; }
.detail-toolbar::after { display: none; }
.detail-toolbar-blur { height: calc(164px + var(--safe-top)); }
.conversation-tabs { border-bottom: 0; background: rgb(247 247 248 / 42%); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); }
.conversation-row { border-bottom-color: color-mix(in srgb, var(--app-border, #eeebe7), transparent 48%); }
.theme-night .chat-toolbar { background: rgb(30 30 32 / 54%); }
.theme-night .chat-toolbar::after { background: linear-gradient(to bottom, rgb(30 30 32 / 38%), rgb(30 30 32 / 12%) 34%, transparent 100%); }
.theme-night .conversation-tabs { background: rgb(30 30 32 / 42%); }

/* ===== 表情包面板：贴在输入框上方，图片存 ImageStorage，点一下直接发出去 ===== */
.sticker-panel { position: absolute; right: 0; bottom: 0; left: 0; z-index: 9; height: var(--function-h); display: flex; flex-direction: column; padding: 10px 16px calc(14px + var(--safe-bottom)); color: var(--function-text); background: var(--function-surface); border-top: 1px solid var(--function-border); }
.sticker-panel[hidden] { display: none; }
.sticker-panel header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sticker-panel header strong { font-size: 14px; }
.sticker-tools { display: flex; align-items: center; gap: 8px; }
.sticker-tools button, .sticker-add { height: 28px; display: grid; place-items: center; padding: 0 12px; border: 2px solid var(--function-pixel-line); border-radius: 0; color: var(--function-text); background: var(--function-card); font-size: 12px; font-weight: 700; cursor: pointer; }
.sticker-tools button.active { color: #fff; background: var(--app-accent); border-color: var(--app-accent); }
.sticker-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 10px; overflow-y: auto; }
.sticker-cell { position: relative; aspect-ratio: 1; padding: 0; border: 3px solid var(--function-pixel-line); border-radius: 0; background: var(--function-card); cursor: pointer; overflow: hidden; }
.sticker-cell img { width: 100%; height: 100%; object-fit: contain; }
.sticker-cell b { position: absolute; top: 0; right: 0; width: 18px; height: 18px; display: grid; place-items: center; color: #fff; background: #d94a58; font-size: 12px; line-height: 1; }
.sticker-empty { grid-column: 1 / -1; margin: 24px 0 0; color: var(--app-muted); font-size: 13px; text-align: center; }
.sticker-description-dialog { width:min(330px,calc(100vw - 40px)); margin:auto; border:0; border-radius:8px; padding:0; color:var(--app-text); background:var(--app-card); box-shadow:0 18px 50px #0004; }
.sticker-description-dialog::backdrop { background:#0008; }
.sticker-description-dialog form { display:grid; gap:12px; padding:18px; }
.sticker-description-dialog header h2 { margin:0; font-size:17px; }
.sticker-description-dialog img { width:96px; height:96px; justify-self:center; object-fit:contain; border:1px solid var(--app-border); border-radius:6px; background:var(--app-surface); }
.sticker-description-dialog label { display:grid; gap:7px; color:var(--app-text); font-size:13px; font-weight:700; }
.sticker-description-dialog textarea { width:100%; resize:vertical; border:1px solid var(--app-border); border-radius:6px; padding:9px; color:var(--app-text); background:var(--app-surface); font:inherit; font-weight:400; }
.sticker-description-actions { display:flex; justify-content:flex-end; gap:8px; }
.sticker-description-actions button { height:34px; padding:0 14px; border:1px solid var(--app-border); border-radius:6px; color:var(--app-text); background:var(--app-surface); font:inherit; cursor:pointer; }
.sticker-description-actions button[type="submit"] { border-color:var(--app-accent); color:#fff; background:var(--app-accent); }
.sticker-message-description { display:block; margin-top:6px; color:var(--app-muted); font-size:12px; line-height:1.4; }

/* ===== 面具：整页而不是小弹窗，列表 → 编辑两屏 ===== */
.mask-view { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; color: var(--app-text); background: var(--app-surface); }
.mask-view[hidden] { display: none; }
.mask-view .wallet-toolbar #mask-back { font-size: 30px; line-height: 1; }
.mask-view .wallet-toolbar .mask-new-button { width: auto; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; color: #fff; background: var(--app-accent); font-size: 13px; font-weight: 700; cursor: pointer; }
.mask-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 20px calc(78px + var(--safe-bottom)); }
.mask-intro { margin: 4px 0 14px; color: var(--app-muted); font-size: 13px; line-height: 1.6; }
.mask-list { display: grid; gap: 10px; }
.mask-item { width: 100%; min-height: 66px; padding: 12px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-card); text-align: left; cursor: pointer; }
.mask-item-avatar { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: #fff; background: #a36b79; font-size: 17px; font-weight: 800; }
.mask-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mask-item strong { display: block; font-size: 15px; }
.mask-item small { display: block; margin-top: 4px; overflow: hidden; color: var(--app-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mask-item .row-arrow { color: var(--app-muted); }
.mask-editor { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: var(--app-surface); }
.mask-editor[hidden] { display: none; }
.mask-editor-head { height: calc(52px + var(--safe-top)); padding: var(--safe-top) 20px 0; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--app-border); }
.mask-editor-back { width: 32px; height: 32px; border: 0; color: var(--app-text); background: transparent; font-size: 25px; line-height: 1; cursor: pointer; }
.mask-editor-head strong { font-size: 17px; }
.mask-editor-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px calc(30px + var(--safe-bottom)); }
.mask-avatar-editor { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.mask-avatar-preview { width: 68px; height: 68px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; color: #fff; background: #a36b79; font-size: 24px; font-weight: 800; }
.mask-avatar-preview img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.mask-avatar-editor button { height: 34px; padding: 0 14px; border: 1px solid var(--app-border); border-radius: 8px; color: var(--app-text); background: var(--app-card); font-size: 13px; font-weight: 700; cursor: pointer; }
.mask-field { display: grid; gap: 7px; margin-top: 16px; color: var(--app-muted); font-size: 13px; }
.mask-field input, .mask-field textarea { width: 100%; border: 1px solid var(--app-border); border-radius: 10px; padding: 10px 12px; outline: 0; color: var(--app-text); background: var(--app-card); font: inherit; }
.mask-field input { height: 44px; padding: 0 12px; }
.mask-field textarea { line-height: 1.55; resize: vertical; }
.mask-delete-button { width: 100%; height: 44px; margin-top: 12px; border: 1px solid #d94a58; border-radius: 10px; color: #c93645; background: transparent; font-weight: 700; cursor: pointer; }
.mask-delete-button[hidden] { display: none; }

/* 计划卡片：聊天里落下的今日安排，样式跟红包卡一个量级，点开跳计划页 */
.plan-card { display: grid; gap: 6px; min-width: 190px; padding: 12px 14px; border-radius: 10px; color: var(--app-text); background: var(--app-card); text-decoration: none; }
.plan-card > b { font-size: 13px; letter-spacing: 1px; opacity: .75; }
.plan-card i { display: flex; gap: 8px; font-style: normal; font-size: 13px; line-height: 1.5; }
.plan-card i b { flex: none; font-variant-numeric: tabular-nums; opacity: .6; }
.plan-card small { margin-top: 2px; font-size: 11px; opacity: .55; }

.meet-card { display: grid; gap: 6px; min-width: 210px; padding: 12px 14px; border: 1px solid rgb(0 0 0 / 8%); border-radius: 8px; color: var(--app-text); background: color-mix(in srgb, var(--app-card) 88%, transparent); }
.meet-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meet-card-head b { font-size: 13px; letter-spacing: 1px; }
.meet-card-head em { color: #777; font-size: 10px; font-style: normal; font-weight: 600; }
.meet-card.is-confirmed { border-color: rgb(0 0 0 / 20%); box-shadow: inset 3px 0 0 #222; }
.meet-card i { display: block; font-style: normal; font-size: 13px; line-height: 1.5; }
.meet-card small { margin-top: 2px; font-size: 11px; opacity: .55; }
.meet-card-reschedule { justify-self: start; margin-top: 3px; padding: 0; border: 0; border-bottom: 1px solid currentColor; color: inherit; background: transparent; font: inherit; font-size: 11px; line-height: 20px; opacity: .68; cursor: pointer; }

/* 长按消息菜单：整屏模糊，被按的那条原位抬起放大，菜单贴在它下面（放不下就翻到上面） */
.msg-menu { position: absolute; inset: 0; z-index: 60; }
.msg-menu[hidden] { display: none; }
.msg-menu-veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); animation: msg-menu-fade .18s ease-out; }
.msg-menu-stage { position: absolute; inset: 0; pointer-events: none; }
.msg-menu-stage .message-row { position: absolute; margin: 0; animation: msg-menu-lift .2s cubic-bezier(.2, .9, .3, 1.2); }
.msg-menu-panel { position: absolute; width: 250px; padding: 12px 0 6px; border-radius: 16px; background: rgba(38, 40, 36, .82); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); animation: msg-menu-pop .18s cubic-bezier(.2, .9, .3, 1.15); transform-origin: top center; }
.msg-menu-panel time { display: block; padding: 0 18px 8px; color: rgba(255, 255, 255, .5); font-size: 12px; }
.msg-menu-panel button { display: flex; align-items: center; gap: 14px; width: 100%; height: 46px; padding: 0 18px; border: 0; background: transparent; color: #f2f2f0; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.msg-menu-panel button:active { background: rgba(255, 255, 255, .08); }
.msg-menu-panel button img { width: 19px; height: 19px; opacity: .92; }
.msg-menu-panel button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.msg-menu-panel button.is-danger { color: #ea6a63; }
@keyframes msg-menu-fade { from { opacity: 0; } }
@keyframes msg-menu-lift { from { opacity: .6; transform: scale(1); } }
@keyframes msg-menu-pop { from { opacity: 0; transform: translateY(-6px) scale(.94); } }

/* 划词：只给这一条开放选中 */
.bubble { -webkit-user-select: none; user-select: none; }
.bubble.is-selectable { -webkit-user-select: text; user-select: text; }

/* 批量挑选 */
.message-row.is-picking { cursor: pointer; }
.message-row.is-picked .bubble { outline: 2px solid var(--app-accent, #6f8f6a); outline-offset: 2px; }
.msg-pick-bar { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom, 0px)); z-index: 55; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-radius: 14px; background: rgba(38, 40, 36, .9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #f2f2f0; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.msg-pick-bar[hidden] { display: none; }
.msg-pick-bar span { flex: 1; font-size: 14px; }
.msg-pick-bar button { height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #f2f2f0; font: inherit; font-size: 14px; cursor: pointer; }
.msg-pick-bar button.is-danger { background: #ea6a63; color: #fff; }
.msg-toast { position: absolute; left: 50%; bottom: calc(78px + var(--safe-bottom, 0px)); z-index: 70; transform: translateX(-50%); max-width: 78%; padding: 9px 14px; border-radius: 12px; background: rgba(38, 40, 36, .9); color: #f2f2f0; font-size: 13px; text-align: center; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.msg-toast.is-on { opacity: 1; }

/* 引用：输入框上方的预览条 + 气泡里的引用小标签 */
.quote-preview { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0 10px 6px; padding: 8px 10px; border-radius: 10px; background: var(--app-surface, #f2f1ee); border-left: 3px solid var(--app-accent, #6f8f6a); font-size: 12px; }
.quote-preview[hidden] { display: none; }
.quote-preview-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--app-text, #222); }
.quote-preview-body b { font-size: 12px; }
.quote-preview-body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--app-muted, #888); }
#quote-preview-cancel { border: 0; background: transparent; color: var(--app-muted, #888); font-size: 18px; line-height: 1; cursor: pointer; }
.quote-ref { display: block; margin-bottom: 6px; padding: 6px 8px; border-left: 3px solid var(--app-accent, #6f8f6a); background: rgba(0, 0, 0, .06); border-radius: 4px; font-size: 12px; color: var(--app-muted, #888); }
.bubble.self .quote-ref { background: rgba(255, 255, 255, .18); }
.bubble.is-editing { outline: 2px solid var(--app-accent, #6f8f6a); outline-offset: 2px; }

/* 按住说话：iOS 的长按放大镜 / 文本选择菜单会把手势整个吃掉，这里全部关掉 */
.message-composer, .message-composer .composer-icon, .voice-button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.voice-button { touch-action: none; }
/* 录音时把整个详情页钉住：上滑是「取消发送」的手势，不该滚动画面 */
.chat-detail-view.is-recording { touch-action: none; overflow: hidden; }
.chat-detail-view.is-recording .message-area { overflow: hidden; }
.voice-hold { position: absolute; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(0, 0, 0, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); touch-action: none; overscroll-behavior: contain; }
.voice-hold[hidden] { display: none; }
.voice-hold-card { display: grid; justify-items: center; gap: 10px; padding: 22px 30px; border-radius: 20px; background: rgba(38, 40, 36, .9); color: #f2f2f0; box-shadow: 0 18px 44px rgba(0, 0, 0, .32); }
.voice-hold-wave { display: flex; align-items: center; gap: 3px; height: 30px; }
.voice-hold-wave i { width: 3px; height: 8px; border-radius: 2px; background: #f2f2f0; animation: voice-hold-bounce .9s ease-in-out infinite; }
.voice-hold-wave i:nth-child(2n) { animation-delay: .12s; }
.voice-hold-wave i:nth-child(3n) { animation-delay: .24s; }
.voice-hold-wave i:nth-child(4n) { animation-delay: .36s; }
.voice-hold-card b { font-size: 17px; font-variant-numeric: tabular-nums; }
.voice-hold-card small { font-size: 12px; opacity: .6; }
.voice-hold.is-cancel .voice-hold-card { background: rgba(190, 70, 62, .9); }
.voice-hold.is-cancel .voice-hold-card small { opacity: .9; }
@keyframes voice-hold-bounce { 0%, 100% { height: 8px; } 50% { height: 24px; } }

/* 语音气泡 */
.voice-bubble { display: inline-flex; align-items: center; gap: 10px; min-width: 96px; }
.voice-bubble-play { width: 0; height: 0; flex: none; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; opacity: .75; }
.voice-bubble-wave { display: flex; align-items: center; gap: 2px; height: 18px; }
.voice-bubble-wave i { width: 2.5px; border-radius: 2px; background: currentColor; opacity: .45; }
.voice-bubble b { font-size: 13px; font-weight: 400; opacity: .7; font-variant-numeric: tabular-nums; }
.voice-bubble-text { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 18%, transparent); font-size: 13px; line-height: 1.5; opacity: .85; }
.voice-bubble-text.is-pending { opacity: .5; font-style: italic; }
/* 存了音频的才点得开；老消息没有 audio 字段，整条压暗表示放不了 */
.voice-bubble[data-voice-audio] { cursor: pointer; }
.voice-bubble.is-silent { opacity: .55; }
/* 播放中：波形条上下动起来，每根错开一点相位 */
.voice-bubble.is-playing .voice-bubble-play { opacity: 1; }
.voice-bubble.is-playing .voice-bubble-wave i { animation: voice-wave .9s ease-in-out infinite; opacity: .8; }
.voice-bubble.is-playing .voice-bubble-wave i:nth-child(3n) { animation-delay: .15s; }
.voice-bubble.is-playing .voice-bubble-wave i:nth-child(3n + 1) { animation-delay: .3s; }
@keyframes voice-wave { 50% { transform: scaleY(.45); } }
@media (prefers-reduced-motion: reduce) { .voice-bubble.is-playing .voice-bubble-wave i { animation: none; } }

/* AI 自己换的券：票面直接铺在气泡里，点开去卡券页 */
.coupon-card { display: block; width: 218px; text-decoration: none; color: inherit; }
.coupon-card img { display: block; width: 100%; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .16)); }
.coupon-card small { display: block; margin-top: 6px; font-size: 11px; opacity: .6; }

/* 去见他：+号面板第4页（剧情道具/心声/趣味礼物/续写）与第4个圆点，只在见面中显示 */
#chat-functions:not(.meet-active) [data-function-page="3"],
#chat-functions:not(.meet-active) [data-function-dot="3"] { display: none; }
#meet-innervoice-toggle.active .function-icon { opacity: .55; }

/* 见面分割线：仿"线下 开启"样式，脱离头像栏网格居中显示 */
.message-row.meet-divider-row { display: block; margin: 14px 0; text-align: center; }
.meet-divider-row .meet-divider-text { padding: 4px 12px; color: var(--app-muted); font-size: 11px; font-weight: 650; letter-spacing: 1px; }
.meet-divider-row .meet-divider-elapsed { display: block; margin-top: 2px; color: var(--app-muted); font-size: 10px; opacity: .75; }

/* 私语模式：动作描写()灰色斜体，内心独白「」与心声『』统一为紫色高强调 */
.bubble .godview-message { font-style: normal; }
.bubble .godview-narration { font-style: italic; color: #9a9a9a; }
.bubble .action-desc { font-style: italic; color: #9a9a9a; }
.bubble .inner-voice,
.bubble .heart-voice,
.bubble mark { display: block; margin-top: 5px; padding: 5px 7px; border-left: 3px solid #9b72bd; border-radius: 4px; color: #76518f; background: rgb(155 114 189 / 14%); font-style: italic; font-size: 11px; text-decoration: none; }

/* 到点确认：黑白磨砂小窗，固定在聊天设备内部，不遮住浏览器外层。 */
.meet-due-popup { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 22px; background: rgb(0 0 0 / 24%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.meet-due-popup[hidden] { display: none; }
.meet-due-glass { width: min(100%, 330px); padding: 20px; border: 1px solid rgb(255 255 255 / 68%); border-radius: 8px; color: #171717; background: rgb(250 250 250 / 88%); box-shadow: 0 18px 50px rgb(0 0 0 / 28%); backdrop-filter: blur(24px) saturate(.65); -webkit-backdrop-filter: blur(24px) saturate(.65); }
.meet-due-kicker { display: block; color: #777; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.meet-due-glass h2 { margin: 8px 0 7px; font-size: 17px; line-height: 1.45; letter-spacing: 0; }
.meet-due-glass > p { min-height: 18px; margin: 0 0 15px; color: #666; font-size: 12px; line-height: 1.5; }
.meet-due-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 15px; padding: 9px 10px; border: 1px solid #d8d8d8; border-radius: 6px; background: rgb(255 255 255 / 70%); }
.meet-due-field span { color: #666; font-size: 12px; }
.meet-due-field input { min-width: 0; border: 0; outline: 0; color: #222; background: transparent; font: inherit; font-size: 12px; }
.meet-due-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.meet-due-actions button { min-width: 0; height: 36px; padding: 0 6px; border: 1px solid #c9c9c9; border-radius: 6px; color: #333; background: rgb(255 255 255 / 66%); font: inherit; font-size: 12px; cursor: pointer; }
.meet-due-actions button.is-primary { border-color: #171717; color: #fff; background: #171717; }
.theme-night .meet-card { border-color: rgb(255 255 255 / 12%); }
.theme-night .meet-card.is-confirmed { border-color: rgb(255 255 255 / 22%); box-shadow: inset 3px 0 0 #eee; }

/* 趣味礼物：纯装饰卡片，无功能 */
.trinket-card { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 14px; }
.trinket-card .trinket-emoji { font-size: 22px; }

/* 侧栏见面模式条：仿 conversation-tabs 三态样式 */
/* 见面态侧栏面板与常规 quick-links 互斥显示；.hidden 属性要 !important 才能压过 display:grid */
.sidebar-quick-links[hidden], .sidebar-meet-panel[hidden] { display: none !important; }
.sidebar-meet-panel { display: grid; gap: 12px; }
.sidebar-meet-modes { display: flex; gap: 7px; padding: 4px; border-radius: 10px; background: rgb(0 0 0 / 4%); }
.sidebar-meet-mode { flex: 1; height: 34px; border: 0; border-radius: 8px; color: #888; background: transparent; font-size: 13px; cursor: pointer; }
.sidebar-meet-mode.active { color: #333; background: #fff; font-weight: 700; box-shadow: 0 1px 4px rgb(0 0 0 / 8%); }
.sidebar-meet-settings { display: grid; gap: 8px; }
.sidebar-meet-field { display: grid; gap: 4px; font-size: 12px; color: #888; }
.sidebar-meet-field-row { grid-template-columns: 1fr auto; grid-auto-flow: column; align-items: center; }
.sidebar-meet-field input, .sidebar-meet-field textarea { border: 1px solid rgb(0 0 0 / 8%); border-radius: 8px; padding: 6px 8px; font-size: 13px; color: #333; background: rgb(255 255 255 / 60%); resize: vertical; }
.sidebar-meet-field-row input { width: 70px; }
.sidebar-meet-end { height: 40px; border: 0; border-radius: 10px; color: #a94442; background: rgb(169 68 66 / 10%); font-size: 13px; font-weight: 650; cursor: pointer; }
.theme-night .sidebar-meet-mode.active { color: var(--app-text); background: rgb(255 255 255 / 12%); }
.theme-night .sidebar-meet-field input, .theme-night .sidebar-meet-field textarea { color: var(--app-text); background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 14%); }