:root {
    /* 基础变量（默认主题：听风雅集）。其余主题通过 html[data-theme=...] 覆盖 */
    --bg-canvas: #f4efe6; --chat-bg-a: #fefefe; --chat-bg-b: #f4efe6;
    --panel-bg: #ffffff; --paper-bg: #fcf9f2; --soft-bg: #f3f7f2; --soft-hover: #f3f0ea;
    --input-bg: #faf9f6; --input-focus-bg: #ffffff;
    --sidebar-bg: #18202a; --sidebar-header: #10161f; --sidebar-border: #10161f; --sidebar-divider: #232f3e;
    --sidebar-text: #c8d1db; --sidebar-header-text: #f3f4f6; --sidebar-section: #8a99ad;
    --sidebar-item: #9aa4b2; --sidebar-hover-bg: #232f3e; --sidebar-hover-text: #ffffff; --sidebar-sub-header: #a4b3c6;
    --avatar-bg: #2e3b4e; --avatar-text: #cbd5e1;
    --accent: #275d34; --accent-deep: #1d4527; --accent-gold: #b38622;
    --gold-soft: #d4a373; --gold-soft-text: #85581a;
    --text-main: #2b2b2b; --text-muted: #6e6559; --text-dim: #5c554b;
    --msg-info: #8c8275; --quote-text: #555555;
    --bubble-in: #fffefb; --bubble-in-text: #2c2c2c;
    --bubble-out: #e1e8dc; --bubble-out-text: #233b28; --bubble-out-border: #b5c4ad;
    --sys-bg: #f5f0e1; --sys-text: #7f5539; --sys-border: #d4a373;
    --border-wood: #d3c7b2; --sticker-border: #e2d9c8; --mention-border: #f4efe6; --tv-border: #c9d8c5;
    --watermark: #b8af9f;
    --divider-text: #8a8071; --divider-text-2: #a89e8d; --divider-bg: rgba(138,128,113,0.1); --divider-hover-bg: rgba(39,93,52,0.1);
    --danger: #e63946; --danger-deep: #9b2226; --danger-warm: #bc6c25;
    --gfw-bg: #1f2937; --gfw-border: #3d4a5c; --gfw-header-a: #1f3a52; --gfw-header-b: #275d34; --gfw-body: #0d1117;
    --gmp-panel-bg: #fffdf8; --gmp-name: #3d3226;
    --focus-ring: rgba(39, 93, 52, 0.12); --focus-ring-strong: rgba(39, 93, 52, 0.25);
    --overlay-dark: rgba(24, 32, 42, 0.85);
}
body, html { height: 100%; margin: 0; background-color: var(--bg-canvas); font-family: 'Noto Serif SC', serif; overflow: hidden; color: var(--text-main); -webkit-tap-highlight-color: transparent; }
/* 移动端滚动体验：消息区滚动不连带页面橡皮筋；全局滚动条贴边细窄 */
.chat-messages { overscroll-behavior: contain; }
.app-container { display: flex; height: 100vh; height: 100dvh; overflow: hidden; position: relative; }
.font-calligraphy { font-family: 'Ma Shan Zheng', cursive; }
.sidebar { position: relative; width: 280px; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; border-right: 1px solid var(--sidebar-border); z-index: 10; height: 100vh; height: 100dvh; box-shadow: 4px 0 20px rgba(0,0,0,0.1); }
.sidebar-header { padding: 18px 20px; font-size: 1.15rem; font-weight: 600; color: var(--sidebar-header-text); background: var(--sidebar-header); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--sidebar-divider); min-height: 72px; flex-shrink: 0; letter-spacing: 2px; }
.session-list { flex: 1; min-height: 0; overflow: hidden; padding: 6px 0; display: flex; flex-direction: column; }
/* 头部案主名下小字行（灵通状态 · 同席在线） */
.sidebar-me-col { display: flex; flex-direction: column; min-width: 0; }
.sidebar-header-sub { font-size: 0.68rem; color: var(--sidebar-section); letter-spacing: 1px; margin-top: 1px; display: flex; align-items: center; gap: 5px; font-weight: 400; }
.sidebar-header-sub .sub-sep { opacity: 0.55; }
#online-count-badge { font-size: 0.68rem; font-weight: 600; letter-spacing: 1px; color: var(--sidebar-section); background: none; border: none; padding: 0; }
/* 旧「分区标题」样式已随方案B单轴流改造移除 */
.member-drawer, .group-drawer { opacity: 1; overflow-y: auto; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, flex 0.35s ease; }
.group-drawer { max-height: 200px; flex: 0 1 auto; }
.member-drawer { flex: 1 1 0%; min-height: 0; }
.member-drawer.collapsed, .group-drawer.collapsed { max-height: 0px !important; flex: 0 0 0px !important; min-height: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; }
.session-item { padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; position: relative; font-size: 0.9rem; margin: 2px 8px; border-radius: 6px; transition: 0.25s; color: var(--sidebar-item); }
.session-item:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-hover-text); }
.session-item.active { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; font-weight: 600; box-shadow: 0 4px 12px var(--focus-ring-strong); }
.friend-subgroup-header { font-size: 0.76rem; color: var(--sidebar-sub-header); padding: 6px 12px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.03); cursor: pointer; border-radius: 4px; margin: 4px 8px 2px 8px; font-weight: 600; }
.friend-subgroup-header:hover { background: rgba(255,255,255,0.08); color: #fff; }
.friend-group-actions { display: none; margin-left: 6px; gap: 6px; font-size: 0.82rem; flex-shrink: 0; }
.session-item:hover .friend-group-actions { display: flex; }
.status-avatar-wrapper { position: relative; display: inline-block; margin-right: 8px; flex-shrink: 0; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--avatar-bg); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--avatar-text); border: 1.5px solid rgba(255,255,255,0.2); }
.online-badge-dot { position: absolute; bottom: 0px; right: 0px; width: 10px; height: 10px; background-color: #22c55e; border: 2px solid var(--sidebar-bg); border-radius: 50%; box-shadow: 0 0 8px #22c55e; z-index: 3; }
.offline-badge-dot { position: absolute; bottom: 0px; right: 0px; width: 9px; height: 9px; background-color: #64748b; border: 2px solid var(--sidebar-bg); border-radius: 50%; z-index: 3; }
.unread-badge { font-size: 0.7rem; padding: 2px 6px; margin-left: 6px; border-radius: 10px; font-weight: 700; background: var(--danger); color: #ffffff; box-shadow: 0 2px 6px rgba(230, 57, 70, 0.4); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-width: 18px; height: 18px; }
.session-item.online-member .nickname-text { color: #ffffff; font-weight: 600; }
.session-item.offline-member .nickname-text { color: #64748b; }
.workspace-view { flex: 1; display: none; flex-direction: column; background: var(--paper-bg); position: relative; height: 100vh; height: 100dvh; overflow: hidden; }
.workspace-view.active { display: flex; }
.chat-header { padding: 8px 15px; background: var(--panel-bg); border-bottom: 1px solid var(--border-wood); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.02); z-index: 5; min-height: 48px; }
.btn { border-radius: 6px; font-weight: 600; padding: 6px 16px; transition: all 0.25s ease-in-out; font-size: 0.9rem; letter-spacing: 1px; font-family: 'Noto Serif SC', serif; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.btn-outline-warning { color: var(--gold-soft-text); border-color: var(--gold-soft); background: var(--paper-bg); }
.btn-outline-warning:hover { background: var(--gold-soft); color: #fff; border-color: var(--gold-soft); }
.btn-outline-danger { color: var(--danger-deep); border-color: var(--danger-warm); background: var(--paper-bg); }
.btn-outline-danger:hover { background: var(--danger-deep); color: #fff; border-color: var(--danger-deep); }
.btn-outline-success { color: var(--accent); border-color: #588157; background: var(--soft-bg); }
.btn-outline-success:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border: none; color: #fff; }
.btn-success { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border: none; color: #fff; }
.btn-danger { background: linear-gradient(135deg, #bc4749, var(--danger-deep)); border: none; color: #fff; }
.chat-messages { flex: 1; padding: 25px; overflow-y: auto; background: radial-gradient(circle, var(--chat-bg-a) 0%, var(--chat-bg-b) 100%); display: flex; flex-direction: column; position: relative; }
.chat-messages-inner { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: auto; }
.chat-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--watermark); pointer-events: none; letter-spacing: 4px; z-index: 0; user-select: none; }

/* ===== 文件拖入遮罩 ===== */
#file-drop-overlay { position: absolute; inset: 0; z-index: 60; background: var(--overlay-dark); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; color: var(--paper-bg); pointer-events: none; }
#file-drop-overlay .drop-overlay-inner { text-align: center; padding: 40px 60px; border: 2px dashed var(--accent-gold); border-radius: 16px; background: var(--focus-ring); }
#file-drop-overlay .fa-cloud-arrow-down { font-size: 3rem; color: var(--accent-gold); }
#file-drop-overlay .drop-overlay-title { font-size: 1.6rem; letter-spacing: 4px; margin-top: 10px; color: var(--paper-bg); }

/* ===== 待发文件卡片（暂存于消息框上方） ===== */
.staged-files-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.staged-file-card { position: relative; border: 1px solid var(--border-wood); border-radius: 8px; background: var(--panel-bg); box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: visible; }
.staged-file-card .staged-thumb { display: block; width: 86px; height: 86px; object-fit: cover; border-radius: 7px; }
.staged-doc-card { width: 118px; padding: 10px 8px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.staged-doc-card .staged-doc-icon { font-size: 1.5rem; color: var(--accent); }
.staged-doc-card .staged-doc-name { font-size: 0.72rem; color: var(--text-main); max-width: 104px; }
.staged-doc-card .staged-doc-size { font-size: 0.65rem; color: var(--text-muted); font-family: monospace; }
.staged-remove-btn { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--danger); color: #fff; font-size: 0.7rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(230,57,70,0.5); z-index: 3; }
.staged-remove-btn:hover { background: #c1121f; }

/* ===== 消息气泡 - 古风主题 + 垂直居中 ===== */
.message-row { display: flex; gap: 10px; max-width: 72%; position: relative; z-index: 2; }
.message-row.incoming { align-self: flex-start; flex-direction: row; }
.message-row.outgoing { align-self: flex-end; flex-direction: row-reverse; }
.message-row.system-announcement { align-self: center; max-width: 90%; margin: 8px 0; }

.message-bubble {
    padding: 6px 16px;
    border-radius: 12px;
    word-break: break-all;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    border: 1px solid var(--border-wood);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 36px;
}
.message-row.incoming .message-bubble {
    background: var(--bubble-in);
    color: var(--bubble-in-text);
    border-top-left-radius: 2px;
}
.message-row.outgoing .message-bubble {
    background: var(--bubble-out);
    color: var(--bubble-out-text);
    border-color: var(--bubble-out-border);
    border-top-right-radius: 2px;
}
.message-row.system-announcement .message-bubble {
    background: var(--sys-bg);
    color: var(--sys-text);
    border: 1px dashed var(--sys-border);
    text-align: center;
    font-size: 0.88rem;
    border-radius: 8px;
    width: 100%;
    padding: 4px 12px;
    min-height: 30px;
}

/* 关键修复：清除气泡内所有块级元素的上下外边距 */
.message-bubble p,
.message-bubble div,
.message-bubble span,
.message-bubble pre,
.message-bubble code,
.message-bubble ul,
.message-bubble ol,
.message-bubble blockquote,
.message-bubble h1,
.message-bubble h2,
.message-bubble h3,
.message-bubble h4,
.message-bubble h5,
.message-bubble h6 {
    margin: 0 !important;
}

.msg-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-wood); flex-shrink: 0; background: var(--panel-bg); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.message-content-wrapper { display: flex; flex-direction: column; max-width: 100%; }
.message-row.incoming .message-content-wrapper { align-items: flex-start; }
.message-row.outgoing .message-content-wrapper { align-items: flex-end; }
.message-info { font-size: 0.75rem; color: var(--msg-info); margin-bottom: 2px; padding: 0 4px; display: flex; align-items: center; gap: 6px; }

.msg-quote-box { background: rgba(0,0,0,0.04); border-left: 3px solid var(--accent); padding: 2px 8px; font-size: 0.8rem; margin-bottom: 4px; border-radius: 4px; color: var(--quote-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: background 0.2s; }
.msg-quote-box:hover { background: rgba(0,0,0,0.08); }
.active-quote-banner { display: none; background: var(--soft-bg); border-left: 4px solid var(--accent); padding: 6px 12px; font-size: 0.85rem; align-items: center; justify-content: space-between; border-radius: 4px; margin-bottom: 6px; }
/* 消息操作按钮：用 opacity + pointer-events 实现平滑显隐，避免鼠标未到达就消失 */
.reply-btn { visibility: hidden; opacity: 0; pointer-events: none; position: absolute; top: -4px; left: -24px; background: var(--text-dim); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; transition: opacity 0.12s ease, visibility 0s linear 0.12s; }
.message-row:hover .reply-btn { visibility: visible; opacity: 0.85; pointer-events: auto; transition: opacity 0.12s ease, visibility 0s linear 0s; }
.message-row:hover .reply-btn:hover { opacity: 1; background: var(--accent); }
/* 复制按钮 */
.copy-msg-btn { visibility: hidden; opacity: 0; pointer-events: none; position: absolute; bottom: -4px; right: -4px; background: var(--text-dim); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; transition: opacity 0.12s ease, visibility 0s linear 0.12s; }
.message-row:hover .copy-msg-btn { visibility: visible; opacity: 0.85; pointer-events: auto; transition: opacity 0.12s ease, visibility 0s linear 0s; }
.message-row:hover .copy-msg-btn:hover { opacity: 1; background: var(--accent); }
/* 触屏设备无 hover：按钮半透明常显 */
@media (hover: none) {
    .reply-btn, .copy-msg-btn, .react-btn, .recall-btn { visibility: visible; opacity: 0.6; pointer-events: auto; }
}
/* 引用跳转落点高亮：金光描边脉冲两回 */
.jump-highlight { animation: jumpHl 0.6s ease-in-out 3; box-shadow: 0 0 0 2px var(--accent-gold); }
@keyframes jumpHl { 0%,100% { box-shadow: 0 0 0 2px var(--accent-gold); background: transparent; } 50% { box-shadow: 0 0 14px 3px var(--accent-gold); background: rgba(179,134,34,0.12); } }
/* 趣味系统行（拍一拍/掷骰）：略施楷意与淡金色 */
.tf-special-row { color: var(--gold-soft-text); font-family: 'Ma Shan Zheng', cursive; letter-spacing: 1px; text-align: center; font-size: 0.95rem; background: transparent; }
/* 通话计时：等宽数字、主题绿 */
.call-duration { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 700; color: var(--accent); letter-spacing: 2px; }
/* 会话列表草稿标记：朱红小字 */
.draft-tag { color: var(--danger); font-size: 0.72rem; margin-left: 2px; flex-shrink: 0; }
/* 可拍一拍的头像：手型光标提示可点 */
img.msg-avatar[onclick] { cursor: pointer; }
/* "回到底部"悬浮按钮：消息区右下，浮出输入栏之上；默认隐藏 */
#scroll-bottom-pill { display: none; position: absolute; right: 16px; bottom: 92px; z-index: 30; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 20px; border: 1px solid var(--border-wood); background: var(--panel-bg); color: var(--accent); box-shadow: 0 3px 12px rgba(0,0,0,0.18); align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-size: 0.85rem; }
#scroll-bottom-pill:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0,0,0,0.22); }
#scroll-pill-count { font-weight: 700; color: var(--danger); min-width: 1ch; }

/* ===== 会话列表顶部：墨迹检索行 + 雅藏入口 ===== */
.tf-search-row { display: flex; align-items: center; gap: 8px; margin: 8px 10px 6px; padding: 0 10px; background: rgba(255,255,255,0.08); border-radius: 8px; flex-shrink: 0; }
.tf-search-icon { color: var(--sidebar-section); font-size: 0.85rem; }
#global-search-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #f3f4f6; font-size: 0.85rem; padding: 8px 0; }
#global-search-input::placeholder { color: rgba(200,209,219,0.55); }
#global-search-input::-webkit-search-cancel-button { filter: invert(0.8); }
.tf-bookmark-entry { color: var(--gold-soft); cursor: pointer; font-size: 0.95rem; padding: 4px; }
.tf-bookmark-entry:hover { color: #fff; }

/* ===== 表情回应快捷选择浮层 ===== */
#reaction-picker { display: none; position: fixed; z-index: 10050; background: var(--panel-bg); border: 1px solid var(--border-wood); border-radius: 22px; padding: 5px 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.22); gap: 2px; }
#reaction-picker .rp-emoji { background: transparent; border: none; font-size: 1.25rem; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; transition: background 0.15s, transform 0.15s; padding: 0; line-height: 1; }
#reaction-picker .rp-emoji:hover { background: var(--soft-hover); transform: scale(1.18); }

/* ===== 气泡回应按钮 + emoji 条 ===== */
.react-btn { visibility: hidden; opacity: 0; pointer-events: none; position: absolute; bottom: -4px; left: -24px; background: var(--text-dim); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; transition: opacity 0.12s ease, visibility 0s linear 0.12s; }
.message-row:hover .react-btn { visibility: visible; opacity: 0.85; pointer-events: auto; transition: opacity 0.12s ease, visibility 0s linear 0s; }
.message-row:hover .react-btn:hover { opacity: 1; background: var(--accent); }
.reaction-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.reaction-chip { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--border-wood); background: var(--soft-bg); color: var(--text-main); border-radius: 12px; padding: 0 8px; font-size: 0.8rem; line-height: 1.6; cursor: pointer; transition: all 0.15s; }
.reaction-chip:hover { border-color: var(--accent); }
.reaction-chip.mine { background: rgba(39,93,52,0.12); border-color: var(--accent); }
.reaction-chip .rc-count { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }

/* ===== 消息信息行的收藏星标 ===== */
.tf-msg-bookmark { margin-left: 4px; font-size: 0.7rem; cursor: pointer; color: var(--text-muted); }
.tf-msg-bookmark:hover, .tf-msg-bookmark.is-saved { color: var(--accent-gold); }
.tf-msg-bookmark.is-saved { color: var(--accent-gold); }

/* ===== 检索/雅藏结果列表 ===== */
.tf-results-box { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.tf-empty { text-align: center; color: var(--text-muted); font-size: 0.85rem; padding: 30px 10px; }
.sr-item, .bm-item { position: relative; padding: 8px 10px; border: 1px solid var(--border-wood); border-radius: 8px; background: var(--paper-bg); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.sr-item:hover, .bm-item:hover { background: var(--soft-hover); border-color: var(--accent); }
.sr-head, .bm-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 2px; }
.sr-conv, .bm-conv { font-weight: 700; font-size: 0.85rem; color: var(--accent-deep); }
.sr-time, .bm-time { color: var(--text-muted); font-size: 0.7rem; flex-shrink: 0; }
.sr-snippet, .bm-snippet { font-size: 0.8rem; color: var(--text-main); }
.bm-remove { position: absolute; top: 6px; right: 8px; font-size: 0.75rem; color: var(--text-muted); padding: 4px; }
.bm-remove:hover { color: var(--danger); }
.bm-item .bm-head { padding-right: 20px; }
.reedit-link { color: var(--accent); font-weight: 700; text-decoration: underline; cursor: pointer; margin-left: 6px; }
.reedit-link:hover { color: var(--accent-gold); }
.msg-img-container { position: relative; display: inline-block; }
.msg-img-container img { max-width: 220px; border-radius: 8px; cursor: pointer; display: block; margin-top: 4px; }
.collect-sticker-btn { position: absolute; top: 8px; right: 8px; display: none; background: var(--overlay-dark); color: #ffc107; border: 1px solid var(--accent-gold); border-radius: 6px; padding: 2px 8px; font-size: 0.75rem; cursor: pointer; z-index: 6; backdrop-filter: blur(4px); transition: all 0.2s; }
.msg-img-container:hover .collect-sticker-btn { display: flex; align-items: center; gap: 4px; }
.collect-sticker-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.recall-btn { visibility: hidden; opacity: 0; pointer-events: none; position: absolute; top: -4px; right: -4px; background: var(--text-dim); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; transition: opacity 0.12s ease, visibility 0s linear 0.12s; }
.message-row.outgoing:hover .recall-btn { visibility: visible; opacity: 0.85; pointer-events: auto; transition: opacity 0.12s ease, visibility 0s linear 0s; }
.message-row.outgoing:hover .recall-btn:hover { opacity: 1; background: var(--danger); }

.chat-input-area { padding: 16px 20px; background: var(--panel-bg); border-top: 1px solid var(--border-wood); display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 5; }
.input-toolbar { display: flex; gap: 20px; font-size: 1.3rem; color: var(--text-dim); align-items: center; }
.input-toolbar i { cursor: pointer; transition: color 0.25s; }
.input-toolbar i:hover { color: var(--accent); }
#chat-input { border-radius: 8px; border: 1px solid var(--border-wood); padding: 10px 12px; resize: none; font-size: 0.95rem; background: var(--input-bg); color: var(--text-main); font-family: 'Noto Serif SC', serif; }
#chat-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--input-focus-bg); }
.send-msg-btn { min-width: 90px; border-radius: 8px; letter-spacing: 1px; font-size: 1rem; }

.mention-popup { display: none; position: absolute; bottom: 100%; left: 20px; background: var(--panel-bg); border: 1px solid var(--border-wood); border-radius: 8px; width: 240px; max-height: 180px; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.15); z-index: 10000; }
.mention-item { padding: 8px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.88rem; border-bottom: 1px solid var(--mention-border); color: var(--text-main); }
.mention-item:hover, .mention-item.active { background: var(--soft-bg); color: var(--accent); font-weight: 600; }

.emoji-panel { display: none; position: absolute; bottom: 100%; left: 20px; background: var(--panel-bg); border: 1px solid var(--border-wood); border-radius: 12px; width: 380px; padding: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.15); z-index: 9999; }
.emoji-nav-tabs { display: flex; border-bottom: 2px solid var(--border-wood); margin-bottom: 10px; gap: 4px; }
.emoji-nav-item { padding: 6px 12px; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--text-muted); border-radius: 6px 6px 0 0; transition: 0.2s; user-select: none; }
.emoji-nav-item:hover { color: var(--accent); background: var(--paper-bg); }
.emoji-nav-item.active { color: var(--accent); border-bottom: 2px solid var(--accent); background: var(--soft-bg); font-weight: 700; margin-bottom: -2px; }
.emoji-tab-pane { display: none; }
.emoji-tab-pane.active { display: block; }
.emoji-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-height: 210px; overflow-y: auto; padding: 2px; }
.emoji-item { font-size: 1.6rem; text-align: center; cursor: pointer; border-radius: 8px; padding: 6px; transition: 0.2s; position: relative; display: flex; align-items: center; justify-content: center; }
.emoji-item:hover { background: var(--soft-hover); transform: scale(1.1); }
.sticker-item-wrapper { position: relative; width: 56px; height: 56px; }
.sticker-item-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid var(--sticker-border); }
.sticker-item-wrapper .del-sticker-btn { position: absolute; top: -5px; right: -5px; background: var(--danger); color: #fff; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.sticker-item-wrapper:hover .del-sticker-btn { display: flex; }

.multiplayer-banner { background: linear-gradient(90deg, var(--gfw-header-a), var(--gfw-header-b)); color: var(--paper-bg); padding: 8px 25px; border-bottom: 2px solid var(--accent-gold); display: none; align-items: center; justify-content: space-between; font-size: 0.92rem; box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 6; }
.multiplayer-banner > div:first-child { overflow: hidden; }
/* 移动端广播跑马灯：文本溢出时来回滚动（.tf-marquee 由 JS 在溢出时挂载） */
.tf-marquee { overflow: visible !important; text-overflow: clip !important; animation: tfMarquee ease-in-out infinite alternate; }
@keyframes tfMarquee { from { transform: translateX(0); } to { transform: translateX(var(--marquee-x, -100%)); } }

/* ===== 快速登录（QQ 式点头像直登） ===== */
#quick-login-area { margin: 0 auto 16px; padding: 10px 10px 8px; max-width: 330px; border: 1px dashed var(--border-wood); border-radius: 12px; background: var(--soft-bg); }
.quick-login-hint { text-align: center; font-size: 0.78rem; color: var(--text-muted); letter-spacing: 3px; margin-bottom: 10px; }
#quick-login-list { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.quick-acc { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.quick-acc-wrap { position: relative; width: 54px; height: 54px; }
.quick-acc-wrap img, .quick-acc-wrap .quick-acc-fallback { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-soft); box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: 0.25s; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; background: var(--avatar-bg); font-family: 'Ma Shan Zheng', cursive; }
.quick-acc:hover img, .quick-acc:hover .quick-acc-fallback { transform: scale(1.08); border-color: var(--accent); box-shadow: 0 4px 14px var(--focus-ring-strong); }
.quick-acc-del { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 0.6rem; display: none; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.quick-acc:hover .quick-acc-del { display: flex; }
/* 触屏设备无 hover：删除按钮常显（半透明，不碍眼） */
@media (hover: none) { .quick-acc-del { display: flex; opacity: 0.75; } }
.quick-acc-nick { font-size: 0.75rem; color: var(--text-main); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-banner { background: var(--soft-bg); border-bottom: 1px solid var(--tv-border); padding: 8px 25px; display: none; align-items: center; justify-content: space-between; font-size: 0.9rem; color: var(--accent); }

#custom-toast-container { position: fixed; top: 24px; right: 24px; z-index: 999999; display: flex; flex-direction: column; gap: 10px; }
.custom-toast { pointer-events: auto; cursor: pointer; background: var(--paper-bg); backdrop-filter: blur(8px); border: 1.5px solid var(--border-wood); border-left: 5px solid var(--accent); padding: 12px 18px; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.15); font-size: 0.9rem; color: var(--text-main); display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 360px; }
.custom-toast.warning { border-left-color: var(--accent-gold); }
.custom-toast.danger { border-left-color: var(--danger-deep); }

.modal-overlay { display: none; opacity: 0; transition: opacity 0.35s ease; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(20, 27, 36, 0.65); backdrop-filter: blur(6px); z-index: 99999 !important; justify-content: center; align-items: center; }
.modal-overlay.show { display: flex; opacity: 1; }
.modal-content-custom { background: var(--paper-bg); color: var(--text-main); padding: 35px; border-radius: 14px; width: 440px; max-width: 92%; box-shadow: 0 25px 50px rgba(0,0,0,0.25); border: 2px solid var(--border-wood); position: relative; }

.avatar-selector-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 15px; }
.avatar-option { width: 58px; height: 58px; border-radius: 50%; cursor: pointer; object-fit: cover; border: 3px solid var(--border-wood); transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.12); background: var(--panel-bg); }
@media (max-width: 768px) {
    /* 手机端：头像填满网格单元（SVG 本身 1:1，高度按比例自适应），不再溢出截断 */
    .modal-content-custom { padding: 20px; }
    .avatar-selector-grid { gap: 9px; }
    .avatar-option { width: 100%; height: auto; aspect-ratio: 1 / 1; border-width: 2px; }
}
.avatar-grid-label { grid-column: 1 / -1; text-align: center; font-size: 0.72rem; color: var(--accent-gold); letter-spacing: 3px; padding: 6px 0 2px; opacity: 0.85; }
.avatar-selector-grid .avatar-option.selected { border-color: var(--accent-gold); box-shadow: 0 0 0 3px var(--focus-ring-strong), 0 6px 14px rgba(0,0,0,0.18); transform: scale(1.08); }
.avatar-option.selected { border-color: var(--accent); transform: scale(1.12); box-shadow: 0 0 0 3px var(--focus-ring-strong); }

#image-lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 20, 28, 0.92); backdrop-filter: blur(8px); z-index: 999999; justify-content: center; align-items: center; cursor: zoom-out; }
#image-lightbox img { max-width: 90%; max-height: 90%; border-radius: 8px; box-shadow: 0 25px 50px rgba(0,0,0,0.6); object-fit: contain; }

.chess-board-wrapper { position: relative; width: 440px; height: 440px; background: #e3b784; margin: 0 auto; border: 4px solid #5a3818; box-shadow: 0 10px 25px rgba(0,0,0,0.3); border-radius: 4px; }
.chess-svg { width: 100%; height: 100%; cursor: pointer; display: block; }

.sidebar-overlay-mask { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); z-index: 9998; backdrop-filter: blur(2px); }
.sidebar-overlay-mask.show { display: block; }
.sidebar-toggle-btn { display: none; cursor: pointer; font-size: 1.25rem; color: var(--accent); }

/* 群英录成员面板（悬浮卡片网格，点击头像可结交/私聊） */
#chat-workspace { position: relative; }
#group-members-panel { display: none; position: absolute; top: 56px; right: 12px; width: 350px; max-width: calc(100% - 24px); background: var(--gmp-panel-bg); border: 1px solid var(--border-wood); border-radius: 12px; box-shadow: 0 12px 32px rgba(40,30,15,0.18); z-index: 40; overflow: hidden; }
.gmp-header { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border-wood); background: var(--soft-bg); }
.gmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; max-height: 300px; overflow-y: auto; }
.gmp-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: all 0.15s; }
.gmp-item:hover { background: var(--focus-ring); border-color: var(--border-wood); }
.gmp-avatar-wrap { position: relative; width: 40px; height: 40px; }
.gmp-avatar-wrap .user-avatar { width: 40px; height: 40px; border: 1px solid var(--border-wood); }
.gmp-name { max-width: 100%; font-size: 0.8rem; color: var(--gmp-name); }
.gmp-crown { position: absolute; top: 2px; right: 10px; color: var(--accent-gold); font-size: 0.78rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); }
.gmp-tag { font-size: 0.62rem; line-height: 1.5; padding: 0 7px; border-radius: 8px; border: 1px solid; white-space: nowrap; }
.gmp-tag.self { color: var(--text-dim); border-color: var(--border-wood); background: rgba(92,85,75,0.08); }
.gmp-tag.friend { color: var(--accent); border-color: var(--focus-ring-strong); background: var(--focus-ring); }
.gmp-tag.stranger { color: var(--accent-gold); border-color: var(--gold-soft); background: var(--focus-ring); }
.gmp-tip { border-top: 1px dashed var(--border-wood); }

/* 街机悬浮小窗（内嵌聊天室，可拖拽/缩放/最小化悬挂） */
#game-float-window { position: fixed; display: none; flex-direction: column; background: var(--gfw-bg); border: 1px solid var(--gfw-border); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px rgba(10,15,22,0.5); z-index: 9000; min-width: 320px; min-height: 260px; }
#game-float-window.maximized { left: 8px !important; top: 8px !important; width: calc(100vw - 16px) !important; height: calc(100vh - 16px) !important; }
.gfw-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: linear-gradient(90deg, var(--gfw-header-a), var(--gfw-header-b)); color: var(--paper-bg); cursor: move; user-select: none; touch-action: none; }
.gfw-title-text { font-size: 1.05rem; letter-spacing: 1px; }
.gfw-actions { display: flex; gap: 6px; }
.gfw-btn { background: rgba(255,255,255,0.12); border: none; color: var(--paper-bg); width: 26px; height: 26px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: background 0.15s; }
.gfw-btn:hover { background: rgba(255,255,255,0.28); }
.gfw-btn.gfw-close:hover { background: var(--danger); }
.gfw-body { flex: 1; position: relative; background: var(--gfw-body); }
.gfw-body iframe { width: 100%; height: 100%; border: none; display: block; }
.gfw-resize-handle { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; z-index: 5; background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.35) 50%); }
#game-float-pill { display: none; position: fixed; right: 20px; bottom: 88px; align-items: center; gap: 8px; padding: 8px 14px; background: linear-gradient(90deg, var(--gfw-header-a), var(--gfw-header-b)); color: var(--paper-bg); border: 1px solid var(--accent-gold); border-radius: 999px; cursor: pointer; box-shadow: 0 8px 24px rgba(10,15,22,0.4); z-index: 8999; font-size: 0.85rem; transition: transform 0.15s; }
#game-float-pill:hover { transform: translateY(-2px); }
.gfw-pill-close { color: #ffb4b4; padding-left: 4px; }
.gfw-pill-close:hover { color: #ff6b6b; }

/* 消息日期/时间分隔线 + 增量加载提示条（微信式） */
.msg-date-divider { align-self: center; margin: 14px 0 8px; font-size: 0.72rem; color: var(--divider-text); background: var(--divider-bg); padding: 2px 14px; border-radius: 999px; z-index: 2; }
.msg-time-divider { align-self: center; margin: 8px 0 2px; font-size: 0.68rem; color: var(--divider-text-2); z-index: 2; }
.history-loader-bar { align-self: center; margin: 6px 0 10px; font-size: 0.75rem; color: var(--divider-text); padding: 4px 16px; border-radius: 999px; background: var(--divider-bg); z-index: 2; }
.history-loader-bar[onclick] { cursor: pointer; }
.history-loader-bar[onclick]:hover { background: var(--divider-hover-bg); color: var(--accent); }

/* ===== 主题切换面板 ===== */
.theme-panel { display: none; position: absolute; top: 64px; right: 10px; width: 236px; background: var(--panel-bg); border: 1px solid var(--border-wood); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,0.22); z-index: 70; padding: 8px; }
.theme-panel.show { display: block; }
.theme-panel-title { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 2px; padding: 4px 8px 6px; border-bottom: 1px dashed var(--border-wood); margin-bottom: 6px; }
.theme-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 0.86rem; color: var(--text-main); transition: background 0.15s; }
.theme-option:hover { background: var(--soft-bg); }
.theme-option.active { background: var(--soft-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-option .to-name { display: flex; align-items: center; gap: 7px; }
.theme-option .to-check { font-size: 0.72rem; color: var(--accent); visibility: hidden; }
.theme-option.active .to-check { visibility: visible; }
.theme-swatch { display: flex; gap: 3px; flex-shrink: 0; }
.theme-swatch span { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); display: inline-block; }

/* ===== 主题定义（六景） ===== */
/* 墨韵丹青：水墨宣纸 + 朱砂印 */
html[data-theme="inkmo"] {
    --bg-canvas: #f6f5f2; --chat-bg-a: #ffffff; --chat-bg-b: #f1f0ec;
    --panel-bg: #ffffff; --paper-bg: #f9f8f4; --soft-bg: #f1ece4; --soft-hover: #ece7de;
    --input-bg: #f4f2ed; --input-focus-bg: #ffffff;
    --sidebar-bg: #1b1b1f; --sidebar-header: #121214; --sidebar-border: #060607; --sidebar-divider: #2a2a30;
    --sidebar-text: #c5c1ba; --sidebar-header-text: #f5f4f1; --sidebar-section: #8f8d88;
    --sidebar-item: #a3a099; --sidebar-hover-bg: #2a2a30; --sidebar-hover-text: #ffffff; --sidebar-sub-header: #b0ada6;
    --avatar-bg: #34343a; --avatar-text: #c9c6c0;
    --accent: #8c2f2f; --accent-deep: #692323; --accent-gold: #a3543a;
    --gold-soft: #c98a6b; --gold-soft-text: #7c4327;
    --text-main: #2e2c29; --text-muted: #79736a; --text-dim: #5d5952;
    --msg-info: #8a8378; --quote-text: #5d5952;
    --bubble-in: #ffffff; --bubble-in-text: #33322f;
    --bubble-out: #efe9dd; --bubble-out-text: #4a3f33; --bubble-out-border: #d4c9b6;
    --sys-bg: #f4ece2; --sys-text: #7a4a32; --sys-border: #c98a6b;
    --border-wood: #d6cfc2; --sticker-border: #d9d2c4; --mention-border: #f1f0ec; --tv-border: #ddd3c2;
    --watermark: #b3aca0;
    --divider-text: #8a8478; --divider-text-2: #a29c90; --divider-bg: rgba(138,132,120,0.12); --divider-hover-bg: rgba(140,47,47,0.1);
    --gfw-bg: #1f1f24; --gfw-border: #3a3a42; --gfw-header-a: #3f2020; --gfw-header-b: #8c2f2f; --gfw-body: #0e0e10;
    --gmp-panel-bg: #fbfaf7; --gmp-name: #3a3733;
    --focus-ring: rgba(140, 47, 47, 0.12); --focus-ring-strong: rgba(140, 47, 47, 0.25);
}
/* 竹影清韵：青竹翠色 */
html[data-theme="bamboo"] {
    --bg-canvas: #eef4ec; --chat-bg-a: #fdfefd; --chat-bg-b: #e9f1e5;
    --panel-bg: #ffffff; --paper-bg: #f7faf4; --soft-bg: #e9f3e5; --soft-hover: #e0eeda;
    --input-bg: #f4f9f1; --input-focus-bg: #ffffff;
    --sidebar-bg: #1e3a2a; --sidebar-header: #142b1e; --sidebar-border: #0c1a12; --sidebar-divider: #2b4d38;
    --sidebar-text: #c2d4c4; --sidebar-header-text: #f2f7f0; --sidebar-section: #8aa58c;
    --sidebar-item: #9ab3a0; --sidebar-hover-bg: #2b4d38; --sidebar-hover-text: #ffffff; --sidebar-sub-header: #adc4b2;
    --avatar-bg: #2c4a36; --avatar-text: #c4d6c8;
    --accent: #3a7d44; --accent-deep: #2a5e33; --accent-gold: #9c8b2d;
    --gold-soft: #c2b25a; --gold-soft-text: #6d6318;
    --text-main: #2b322c; --text-muted: #71806f; --text-dim: #556453;
    --msg-info: #7e907c; --quote-text: #4c5a4b;
    --bubble-in: #ffffff; --bubble-in-text: #303a31;
    --bubble-out: #e7f2e0; --bubble-out-text: #2f4a33; --bubble-out-border: #bcd6b6;
    --sys-bg: #edf5e5; --sys-text: #54702f; --sys-border: #a9bf6a;
    --border-wood: #c6d9bf; --sticker-border: #cfdfc8; --mention-border: #e9f1e5; --tv-border: #bcd4b6;
    --watermark: #a3b59e;
    --divider-text: #7f917d; --divider-text-2: #97a895; --divider-bg: rgba(127,145,125,0.12); --divider-hover-bg: rgba(58,125,68,0.1);
    --gfw-bg: #1e2b22; --gfw-border: #3a5243; --gfw-header-a: #1f3a2a; --gfw-header-b: #3a7d44; --gfw-body: #0d130e;
    --gmp-panel-bg: #f9fcf6; --gmp-name: #334033;
    --focus-ring: rgba(58, 125, 68, 0.12); --focus-ring-strong: rgba(58, 125, 68, 0.25);
}
/* 暮山霞紫：暮霭紫霞 */
html[data-theme="zishan"] {
    --bg-canvas: #f4f0f7; --chat-bg-a: #fdfcfe; --chat-bg-b: #ece6f4;
    --panel-bg: #ffffff; --paper-bg: #faf7fc; --soft-bg: #f1eaf7; --soft-hover: #e9dff3;
    --input-bg: #f6f2fa; --input-focus-bg: #ffffff;
    --sidebar-bg: #2b2140; --sidebar-header: #1f1730; --sidebar-border: #150f22; --sidebar-divider: #3d2f58;
    --sidebar-text: #c8c0d6; --sidebar-header-text: #f5f2f9; --sidebar-section: #9488a8;
    --sidebar-item: #a89dbb; --sidebar-hover-bg: #3d2f58; --sidebar-hover-text: #ffffff; --sidebar-sub-header: #beb3ce;
    --avatar-bg: #3d2f58; --avatar-text: #cfc6dd;
    --accent: #7a4fa3; --accent-deep: #5d3a80; --accent-gold: #c08a3e;
    --gold-soft: #d4a76b; --gold-soft-text: #8a5f22;
    --text-main: #332d3d; --text-muted: #7d7489; --text-dim: #635a70;
    --msg-info: #8d8399; --quote-text: #574e63;
    --bubble-in: #ffffff; --bubble-in-text: #383143;
    --bubble-out: #efe7f7; --bubble-out-text: #46335c; --bubble-out-border: #cfc0e2;
    --sys-bg: #f3ecfa; --sys-text: #7a4fa3; --sys-border: #c0a3d8;
    --border-wood: #d5c8e4; --sticker-border: #dcd0ea; --mention-border: #ece6f4; --tv-border: #c9b8dd;
    --watermark: #ada0bd;
    --divider-text: #8c819c; --divider-text-2: #a396b4; --divider-bg: rgba(140,129,156,0.12); --divider-hover-bg: rgba(122,79,163,0.1);
    --gfw-bg: #251d36; --gfw-border: #453763; --gfw-header-a: #35274e; --gfw-header-b: #7a4fa3; --gfw-body: #120e1c;
    --gmp-panel-bg: #fbf8fd; --gmp-name: #3d3548;
    --focus-ring: rgba(122, 79, 163, 0.12); --focus-ring-strong: rgba(122, 79, 163, 0.25);
}
/* 夜阑听风：深夜墨蓝 + 暗金（深色模式） */
html[data-theme="night"] {
    --bg-canvas: #14171e; --chat-bg-a: #1b202a; --chat-bg-b: #10131a;
    --panel-bg: #1e242f; --paper-bg: #1a1f29; --soft-bg: #232b38; --soft-hover: #2a3444;
    --input-bg: #1e242f; --input-focus-bg: #232b38;
    --sidebar-bg: #0d1017; --sidebar-header: #080b11; --sidebar-border: #05070c; --sidebar-divider: #1a212c;
    --sidebar-text: #a9b2c0; --sidebar-header-text: #eef1f5; --sidebar-section: #76818f;
    --sidebar-item: #8d99a9; --sidebar-hover-bg: #1a212c; --sidebar-hover-text: #ffffff; --sidebar-sub-header: #9aa6b5;
    --avatar-bg: #2a3444; --avatar-text: #c3cbd6;
    --accent: #3f8f5c; --accent-deep: #2e6b44; --accent-gold: #c9a227;
    --gold-soft: #a3853a; --gold-soft-text: #cfa94a;
    --text-main: #e2ded4; --text-muted: #9a958a; --text-dim: #a8a498;
    --msg-info: #8b909c; --quote-text: #b3afa5;
    --bubble-in: #232a36; --bubble-in-text: #d6d2c8;
    --bubble-out: #243528; --bubble-out-text: #c8dccb; --bubble-out-border: #37543e;
    --sys-bg: #2b2519; --sys-text: #d0ab62; --sys-border: #8a6f34;
    --border-wood: #333b49; --sticker-border: #3a4454; --mention-border: #1a212c; --tv-border: #2e3a4a;
    --watermark: #464c59;
    --divider-text: #8b91a0; --divider-text-2: #7d8493; --divider-bg: rgba(139,145,160,0.12); --divider-hover-bg: rgba(63,143,92,0.15);
    --gfw-bg: #1e242f; --gfw-border: #38424f; --gfw-header-a: #24303f; --gfw-header-b: #2e6b44; --gfw-body: #0d1117;
    --gmp-panel-bg: #1e242f; --gmp-name: #d4d0c6;
    --focus-ring: rgba(63, 143, 92, 0.18); --focus-ring-strong: rgba(63, 143, 92, 0.35);
    --overlay-dark: rgba(10, 13, 18, 0.88);
}
/* 秋思胡杨：暖秋棕金 */
html[data-theme="qiuse"] {
    --bg-canvas: #f7f1e3; --chat-bg-a: #fffdf6; --chat-bg-b: #f1e8d2;
    --panel-bg: #fffef9; --paper-bg: #fbf6ea; --soft-bg: #f6eedb; --soft-hover: #efe4cb;
    --input-bg: #f8f2e4; --input-focus-bg: #fffdf6;
    --sidebar-bg: #3a2c1e; --sidebar-header: #2a1f14; --sidebar-border: #1c140c; --sidebar-divider: #4d3b28;
    --sidebar-text: #d3c4ae; --sidebar-header-text: #f7f0e3; --sidebar-section: #a08c72;
    --sidebar-item: #b5a48c; --sidebar-hover-bg: #4d3b28; --sidebar-hover-text: #ffffff; --sidebar-sub-header: #c4b49c;
    --avatar-bg: #4d3b28; --avatar-text: #d6c8b2;
    --accent: #b06f24; --accent-deep: #8a5517; --accent-gold: #a8842e;
    --gold-soft: #d4a76b; --gold-soft-text: #7d5a1c;
    --text-main: #38302a; --text-muted: #857a6c; --text-dim: #6b6153;
    --msg-info: #8d8272; --quote-text: #635a4d;
    --bubble-in: #fffdf8; --bubble-in-text: #3a322b;
    --bubble-out: #f5ecd9; --bubble-out-text: #54432c; --bubble-out-border: #d8c6a2;
    --sys-bg: #f6eedb; --sys-text: #8a5f22; --sys-border: #cfa25a;
    --border-wood: #dcc9a4; --sticker-border: #d9c8a5; --mention-border: #f1e8d2; --tv-border: #d4bd92;
    --watermark: #b5a888;
    --divider-text: #8d8371; --divider-text-2: #a89d8a; --divider-bg: rgba(141,130,113,0.12); --divider-hover-bg: rgba(176,111,36,0.1);
    --gfw-bg: #2c2318; --gfw-border: #52422c; --gfw-header-a: #4a3420; --gfw-header-b: #b06f24; --gfw-body: #14100a;
    --gmp-panel-bg: #fdf9ee; --gmp-name: #46392a;
    --focus-ring: rgba(176, 111, 36, 0.12); --focus-ring-strong: rgba(176, 111, 36, 0.25);
}

/* ===== 集会（会盟台）：走主题变量，六景自动适配 ===== */
#multiplayer-center-workspace { background: radial-gradient(circle, var(--chat-bg-a) 0%, var(--chat-bg-b) 100%); padding: 30px; overflow-y: auto; }
.meeting-hero-title { font-size: 2rem; color: var(--text-main); letter-spacing: 4px; }
.meeting-hero-sub { color: var(--text-muted); letter-spacing: 1px; }
.game-choose-btn { font-size: 1.1rem; flex: 1 1 100px; min-width: 96px; flex-direction: column; gap: 6px; border-radius: 12px; padding: 14px 10px; transition: all 0.2s; }
.game-choose-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px var(--focus-ring); }
.game-choose-btn .gc-icon { font-size: 1.4rem; margin: 0; }
.meeting-empty { color: var(--text-muted); letter-spacing: 1px; }
.meeting-card { border: 1px solid var(--border-wood); background: var(--panel-bg); border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.meeting-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px var(--focus-ring-strong); border-color: var(--accent); }
.meeting-card-title { color: var(--accent); }
.meeting-card-meta { color: var(--text-muted); font-size: 0.85rem; }
.meeting-join-btn { font-size: 1rem; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border: none; }
.game-badge { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: 1px; }
.badge-game-monopoly { background: var(--accent); }
.badge-game-majiang { background: #a63d3d; }
.badge-game-hexwars { background: #7a4fa3; }
.badge-game-doudizhu { background: #b07820; }
.badge-game-yezi { background: #4c7a45; }
#multiplayer-room-workspace { background: var(--bg-canvas); }
.mp-room-bar { display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: linear-gradient(90deg, var(--gfw-header-a), var(--gfw-header-b)); color: var(--paper-bg); border-bottom: 2px solid var(--accent-gold); box-shadow: 0 3px 12px rgba(0,0,0,0.15); flex-shrink: 0; }
.mp-room-title { font-size: 1.2rem; color: var(--paper-bg); letter-spacing: 1px; }
.mp-leave-btn { background: rgba(255,255,255,0.15); color: var(--paper-bg); border: 1px solid rgba(255,255,255,0.3); }
.mp-leave-btn:hover { background: rgba(255,255,255,0.3); color: #fff; }
.mp-game-frame-wrap { flex: 1; display: flex; overflow: hidden; position: relative; width: 100%; height: calc(100vh - 50px); }

/* 响应式 */
@media (max-width: 768px) {
    /* ===== 微信/QQ 式布局：抽屉会话列表 + 全屏聊天 ===== */
    .app-container, .sidebar, .workspace-view { height: 100vh; height: 100dvh; }
    .sidebar { position: fixed; top: 0; left: -84%; width: 84%; max-width: 320px; z-index: 9999; transition: left 0.28s ease; }
    .sidebar.mobile-open { left: 0; box-shadow: 8px 0 30px rgba(0,0,0,0.35); }
    .sidebar-toggle-btn { display: inline-block; padding: 6px; }
    .sidebar-header { padding: 14px 16px; min-height: 60px; }

    /* 顶栏单行不换行：标题截断 + 中部工具栏横向滑动 */
    .chat-header { padding: 6px 8px; gap: 4px; flex-wrap: nowrap; min-height: 46px; }
    .chat-header > div:first-child { min-width: 0 !important; flex: 0 1 auto; }
    #active-chat-title { font-size: 1.02rem !important; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #typing-indicator-text { display: none; }
    .chat-header > div:last-child { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .chat-header > div:last-child::-webkit-scrollbar { display: none; }
    .chat-header .btn { padding: 4px 9px; flex-shrink: 0; }
    #chat-date-picker { width: 104px !important; }

    /* 消息区：留白收窄，贴边阅读，禁止横向滚动 */
    .chat-messages { padding: 12px 10px; overflow-x: hidden; }
    .message-row { max-width: 88% !important; }

    /* 输入区：贴底 + 全面屏手势条安全区 + 16px 防聚焦缩放 */
    .chat-input-area { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
    .input-toolbar .d-flex.gap-3 { gap: 1.25rem !important; font-size: 1.1rem; }
    #chat-input { font-size: 16px; min-height: 46px; }
    .send-msg-btn { min-width: 62px; white-space: nowrap; }

    /* 表情/主题面板 */
    .emoji-panel { width: 94% !important; left: 3% !important; }
    .theme-panel { right: 6px; width: 210px; }

    /* 群英录 */
    .gmp-grid { grid-template-columns: repeat(2, 1fr); }

    /* 集会/街机大厅：头图纵向排列，按钮换行 */
    .meeting-center-head { flex-direction: column; align-items: flex-start !important; gap: 10px; margin-bottom: 14px !important; }
    .meeting-hero-title { font-size: 1.3rem !important; }
    .meeting-hero-sub { display: none; }
    #game-center-workspace { padding: 16px !important; }

    /* 集会房间条 */
    .mp-room-title { font-size: 0.95rem !important; }

    /* 街机悬浮窗 */
    #game-float-pill { right: 10px; bottom: 92px; }
    .chess-board-wrapper { width: 320px; height: 320px; }
        /* 集会/共赏广播条：单行紧凑化，把空间还给消息区 */
        .multiplayer-banner, .tv-banner { padding: 5px 10px; gap: 8px; font-size: 0.82rem; }
        .multiplayer-banner > div:first-child, .tv-banner > div:first-child { min-width: 0; flex: 1 1 auto; }
        #multiplayer-banner-text { font-size: 0.82rem !important; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .multiplayer-banner .fs-5 { font-size: 1rem !important; flex-shrink: 0; }
        #join-banner-meeting-btn { white-space: nowrap; flex-shrink: 0; padding: 4px 10px; font-size: 0.85rem; }
        #join-banner-meeting-btn .fa-door-open { display: none; }
        .tv-banner .btn { white-space: nowrap; padding: 4px 8px; font-size: 0.8rem; }
    }

/* ============================================================
// 墨改（2分钟内原地编辑本人文本消息）
// ============================================================ */
.tf-msg-edit { font-size: 0.68rem; color: #8a7a5c; margin-left: 5px; cursor: pointer; transition: transform 0.15s, color 0.15s; }
.tf-msg-edit:hover { color: #275d34; transform: scale(1.15); }
.edited-hint { font-size: 0.65rem; color: #a89878; margin-left: 5px; font-style: italic; }

/* ============================================================
   雅集新功能样式
   ============================================================ */

/* 雅集动态 */
.moment-card { background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.moment-avatar { width: 42px; height: 42px; border-radius: 50%; margin-right: 10px; object-fit: cover; }
.moment-content { font-size: 0.95rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; margin: 8px 0; }
.moment-img { max-width: 100%; border-radius: 8px; margin: 8px 0; cursor: pointer; }
.moment-actions { display: flex; gap: 16px; margin-top: 10px; }
.moment-actions button { background: none; border: none; color: var(--text-sub); cursor: pointer; font-size: 0.85rem; padding: 4px 8px; border-radius: 6px; transition: all 0.2s; }
.moment-actions button:hover { background: var(--bg-hover); }
.moment-actions button.liked { color: #c0392b; }
.moment-comments { background: var(--bg-hover); border-radius: 8px; padding: 10px; margin-top: 10px; }
.moment-comment { font-size: 0.85rem; padding: 3px 0; }

/* 多选栏 */
.multi-select-bar { display: none; align-items: center; gap: 12px; padding: 8px 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border-light); }

/* 转发标签 & 阅后即焚 */
.forward-tag { display: inline-flex; align-items: center; font-size: 0.78rem; margin-bottom: 4px; opacity: 0.8; }
.sd-tag { display: inline-block; margin-left: 6px; }
.sd-countdown { position: absolute; top: 4px; right: 6px; background: #721c24; color: #fff; border-radius: 10px; padding: 1px 6px; font-size: 0.7rem; }
.self-destruct-toggle { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; font-size: 0.8rem; color: #721c24; }

/* 投票卡片 */
.poll-card { background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: 10px; padding: 12px; }
.poll-title { font-weight: bold; margin-bottom: 4px; }
.poll-meta { font-size: 0.78rem; margin-bottom: 10px; }
.poll-option { position: relative; border: 1px solid var(--border-light); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; cursor: pointer; overflow: hidden; transition: all 0.2s; }
.poll-option:hover { border-color: #275d34; }
.poll-option.voted { background: #d4edda; border-color: #275d34; }
.poll-option.ended { cursor: default; }
.poll-option-text { position: relative; z-index: 1; }
.poll-option-emoji { margin-right: 6px; }
.poll-option-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(39,93,52,0.12); z-index: 0; }
.poll-option-count { position: absolute; right: 12px; top: 8px; font-size: 0.78rem; color: var(--text-sub); }

/* 链接预览卡片 */
.link-preview-card { display: flex; gap: 10px; padding: 8px; margin-top: 6px; background: var(--bg-hover); border-radius: 8px; text-decoration: none; color: inherit; max-width: 320px; }
.link-preview-card:hover { background: rgba(39,93,52,0.1); }
.lp-image { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.lp-body { flex: 1; min-width: 0; }
.lp-title { font-weight: bold; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lp-desc { font-size: 0.78rem; color: var(--text-sub); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* 用户名片 */
.uc-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #275d34; }
.uc-stat { text-align: center; }
.uc-stat-num { font-size: 1.3rem; font-weight: bold; color: #275d34; }
.uc-stat-label { font-size: 0.75rem; color: var(--text-sub); }
/* 名片缘起笺：仿笺片小条，记缘起之语 */
.uc-yuanqi-paper { display: inline-block; padding: 8px 18px; background: var(--paper-bg); border: 1px solid var(--gold-soft); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); max-width: 90%; }
.uc-yuanqi-line1 { font-size: 0.9rem; color: var(--accent); }
.uc-yuanqi-line2 { font-size: 0.72rem; color: var(--text-sub); margin-top: 2px; }

/* 遍览已读：侧栏一键清零诸案未读 */
.mark-all-read-row { display: flex; justify-content: center; padding: 2px 10px 6px; }
#mark-all-read-btn {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--gold-soft); background: transparent; color: var(--gold-soft-text);
    font-size: 0.74rem; padding: 3px 14px; border-radius: 12px; cursor: pointer;
    font-family: 'Noto Serif SC', serif; transition: all 0.15s;
}
#mark-all-read-btn:hover { background: var(--gold-soft); color: #fff; }

/* 桌面提醒开关（主题面板古风滑钮） */
.tf-bell-switch { position: relative; display: inline-block; width: 40px; height: 20px; flex-shrink: 0; }
.tf-bell-switch input { opacity: 0; width: 0; height: 0; }
.tf-bell-slider { position: absolute; inset: 0; background: var(--soft-hover); border: 1px solid var(--border-wood); border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.tf-bell-slider::before { content: ''; position: absolute; left: 2px; top: 1px; width: 16px; height: 16px; background: var(--paper-bg); border: 1px solid var(--border-wood); border-radius: 50%; transition: all 0.2s; }
.tf-bell-switch input:checked + .tf-bell-slider { background: var(--accent); border-color: var(--accent); }
.tf-bell-switch input:checked + .tf-bell-slider::before { transform: translateX(19px); background: #fff; border-color: var(--accent-deep); }

/* 译帖弹窗：原文灰笺 · 译文金笺 */
.translate-original { background: var(--bg-hover); border: 1px solid var(--border-wood); border-radius: 8px; padding: 8px 12px; color: var(--text-sub); font-size: 0.88rem; white-space: pre-wrap; word-break: break-word; max-height: 140px; overflow-y: auto; }
.translate-result { background: linear-gradient(135deg, rgba(212,163,115,0.16), rgba(212,163,115,0.30)); border: 1px solid var(--gold-soft); border-radius: 8px; padding: 10px 12px; color: var(--gold-soft-text); font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; }

/* 状态 emoji 选择器 */
.status-emoji-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.status-emoji-opt { font-size: 1.4rem; cursor: pointer; padding: 4px 8px; border-radius: 8px; border: 2px solid transparent; transition: all 0.2s; }
.status-emoji-opt:hover { background: var(--bg-hover); }
.status-emoji-opt.selected { background: rgba(39,93,52,0.15); border-color: #275d34; }

/* 好友列表状态与签名 */
.friend-status-emoji { margin-left: 4px; font-size: 0.85rem; }
.friend-status-text { font-size: 0.72rem; color: #8a7a5c; margin-left: 2px; }
.friend-sig { font-size: 0.7rem; color: var(--text-sub); opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 转发目标项 */
.forward-target-item { display: flex; align-items: center; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background 0.2s; }
.forward-target-item:hover { background: var(--bg-hover); }
.forward-avatar { width: 28px; height: 28px; border-radius: 50%; margin-right: 8px; object-fit: cover; }

/* 群文件册 */
.gf-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: var(--bg-panel); margin-bottom: 8px; }
.gf-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; cursor: pointer; }
.gf-meta { font-size: 0.78rem; color: var(--text-sub); }
.gf-file i { font-size: 1.4rem; }

/* 语音波形 */
.voice-bubble { display: flex; align-items: center; min-width: 160px; cursor: pointer; }
.voice-waveform { display: flex; align-items: center; gap: 2px; height: 30px; }
.voice-bar { width: 3px; background: #275d34; border-radius: 2px; transition: opacity 0.2s; }
.voice-bar.playing { animation: wave 0.6s ease-in-out infinite alternate; }
@keyframes wave { from { transform: scaleY(0.5); } to { transform: scaleY(1); } }

/* 消息操作按钮（悬停浮现） */
.forward-msg-btn { opacity: 0; background: none; border: none; color: #8a7a5c; cursor: pointer; padding: 2px 4px; transition: opacity 0.2s; }
.message-bubble:hover .forward-msg-btn { opacity: 1; }

/* 表情搜索框 */
.emoji-search-box { padding: 0 4px; }

/* 多选 checkbox */
.multi-select-cb { display: none; align-self: center; margin-right: 6px; }

/* 消息右键菜单 */
.message-ctx-item { padding: 6px 14px; cursor: pointer; color: #333; }
.message-ctx-item:hover { background: rgba(39,93,52,0.1); color: #275d34; }

/* 掷骰占卦卡片（紧凑版） */
.fortune-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px !important; background: linear-gradient(135deg, #f9f3e6, #f0e8d0); border: 1px solid #d4c490; border-radius: 8px; max-width: 360px; }
.fortune-dice { font-size: 1.6rem; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); }
.fortune-body { flex: 1; min-width: 0; }
.fortune-header { font-size: 0.75rem; color: #5c4a1f; margin-bottom: 2px; }
.fortune-header b { color: #8b2c1e; font-size: 0.9rem; }
.fortune-title { font-family: 'Noto Serif SC', serif; font-size: 0.9rem; font-weight: bold; color: #8b2c1e; margin-bottom: 1px; letter-spacing: 0.5px; }
.fortune-text { font-size: 0.78rem; color: #5c4a1f; line-height: 1.4; font-style: italic; }

/* 移动端进一步压缩 */
@media (max-width: 768px) {
    .fortune-card { gap: 8px; padding: 6px 10px !important; max-width: calc(100% - 16px); }
    .fortune-dice { font-size: 1.3rem; }
    .fortune-header { font-size: 0.7rem; }
    .fortune-header b { font-size: 0.82rem; }
    .fortune-title { font-size: 0.82rem; }
    .fortune-text { font-size: 0.72rem; line-height: 1.35; }
}
.msg-edit-box { width: 100%; min-width: 200px; }
.msg-edit-input { width: 100%; min-height: 66px; border: 1px solid #b7a98a; border-radius: 8px; background: rgba(255,253,247,0.95); padding: 7px 9px; font-size: 0.88rem; line-height: 1.5; resize: vertical; font-family: inherit; }
.msg-edit-input:focus { outline: none; border-color: #275d34; box-shadow: 0 0 0 2px rgba(39,93,52,0.12); }
.msg-edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }

/* ============================================================
// 群告示横幅
// ============================================================ */
#announce-banner { display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: linear-gradient(90deg, rgba(214,196,152,0.28), rgba(214,196,152,0.10)); border-bottom: 1px dashed #c9b98a; font-size: 0.82rem; color: #6b5b3e; cursor: default; min-height: 34px; }
#announce-banner .fa-scroll { color: #a3843c; flex: 0 0 auto; }
#announce-banner .announce-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#announce-banner .announce-edit { flex: 0 0 auto; color: #a3843c; cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: background 0.15s; }
#announce-banner .announce-edit:hover { background: rgba(163,132,60,0.15); }
/* 堂谕横幅收起钮（细金边古风，随主题金色变量） */
#announce-banner .announce-close { flex: 0 0 auto; color: var(--accent-gold); cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: background 0.15s; }
#announce-banner .announce-close:hover { background: rgba(163,132,60,0.15); }
/* 堂谕弹窗出处行：发布人与张榜时刻 */
.announce-meta { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 6px; }
.announce-meta .fa-feather-pointed { color: var(--accent-gold); }

/* ============================================================
// 会话置顶 / 免打扰
// ============================================================ */
.ctx-flag { font-size: 0.6rem; color: #a3843c; margin-left: 4px; opacity: 0.85; }
.unread-badge.muted { background: #9aa39b !important; opacity: 0.75; }
#session-ctx-menu { position: fixed; z-index: 3000; background: #fdfbf4; border: 1px solid #c9b98a; border-radius: 10px; box-shadow: 0 8px 24px rgba(40,35,20,0.22); padding: 5px; min-width: 132px; }
.scm-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 7px; font-size: 0.82rem; color: #4a3f2c; cursor: pointer; white-space: nowrap; }
.scm-item i { width: 14px; text-align: center; color: #a3843c; }
.scm-item:hover { background: rgba(163,132,60,0.14); }
.scm-item.on { color: #275d34; font-weight: bold; }

/* ============================================================
// 侧栏列表视觉升级（雅集群组 / 同席雅客 · 匾额与笺卡）
// ============================================================ */
/* 分区标题已随方案B单轴流改造移除（名录入口迁入同席录浮层） */
/* 会话项：笺卡化 —— 大圆角、悬浮右移、金色侧饰条 */
.session-item { margin: 3px 10px; padding: 9px 12px; border-radius: 11px; border: 1px solid transparent; }
.session-item:hover { transform: translateX(2px); border-color: rgba(255,255,255,0.08); }
.session-item.active { border-color: rgba(255,255,255,0.16); box-shadow: 0 4px 14px var(--focus-ring-strong), inset 0 1px 0 rgba(255,255,255,0.14); }
.session-item::before { content: ''; position: absolute; left: 0; top: 24%; bottom: 24%; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--accent-gold), rgba(0,0,0,0)); opacity: 0; transition: opacity 0.25s ease; }
.session-item:hover::before, .session-item.active::before { opacity: 1; }
/* 群组头像：圆角方笺 + 金边，与好友圆像区分 */
.session-item .user-avatar:not(img) { border-radius: 10px; background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)); border: 1.5px solid rgba(179,134,34,0.55); }
.session-item.active .user-avatar:not(img) { border-color: rgba(255,255,255,0.5); background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0.06)); }
/* 未读徽标：绛红渐变 + 内高光 */
.unread-badge { background: linear-gradient(135deg, #e4494f, var(--danger)); box-shadow: 0 2px 8px rgba(230, 57, 70, 0.45), inset 0 1px 0 rgba(255,255,255,0.35); }
/* 好友子分组头：金侧条笺 */
.friend-subgroup-header { margin: 6px 10px 3px; padding: 7px 12px; border-radius: 9px; }
/* 在线点：呼吸光晕 */
.online-badge-dot { animation: onlineDotBreath 2.6s ease-in-out infinite; }
@keyframes onlineDotBreath { 0%, 100% { box-shadow: 0 0 5px #22c55e; } 50% { box-shadow: 0 0 11px #22c55e; } }
/* 昵称排版与好友圆像描边 */
.session-item .nickname-text { font-size: 0.92rem; letter-spacing: 0.3px; }
.session-item img.user-avatar { border: 1.5px solid rgba(255,255,255,0.25); box-shadow: 0 2px 6px rgba(0,0,0,0.25); }

/* ===== 语音连麦 · 古风通话界面 ===== */

/* ============================================================
// 雅集动态返回按钮（左上古风描金圆钮，移动端只留箭头）
// ============================================================ */
.moments-back-btn { display: inline-flex; align-items: center; padding: 7px 16px 7px 12px; border-radius: 999px; border: 1.5px solid var(--accent-gold); background: rgba(255,255,255,0.7); color: #6b5b3e; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; flex: 0 0 auto; }
.moments-back-btn:hover { background: var(--accent-gold); color: #fff; transform: translateX(-2px); box-shadow: 0 3px 10px rgba(179,134,34,0.35); }
.moments-back-btn:hover i { transform: translateX(-2px); }
.moments-back-btn i { transition: transform 0.2s ease; }
/* 雅集动态：固定全屏弹层定位 —— 彻底脱离 app-container 的 flex/100dvh 布局链，
   部分安卓 WebView 下该布局链会把内容推出视口（真机全空白根因），fixed 后从视口 0,0 起排永不错位。
   兼容写法不依赖 inset/100dvh；层级低于侧栏抽屉(9998)与发布弹窗(99999)。 */
#moments-workspace.active { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 5000; }

/* ============================================================
// 雅趣坊（锦鲤传书 / 文墨榜 / 无名帖 / 墨宝阁）
// ============================================================ */
.fh-modal { width: min(560px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.fh-group-hint { font-size: 0.8rem; color: #8a6d3b; background: rgba(179,134,34,0.1); border: 1px dashed rgba(179,134,34,0.45); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.fh-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.fh-tab { flex: 1; min-width: 96px; border: 1.5px solid var(--border-wood); background: rgba(255,255,255,0.55); color: #6b5b3e; font-weight: 600; font-size: 0.85rem; padding: 7px 4px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; }
.fh-tab.active { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; border-color: transparent; box-shadow: 0 3px 10px var(--focus-ring-strong); }
.fh-panel { overflow-y: auto; padding-right: 2px; max-height: calc(86vh - 150px); }
.fh-throw-area { background: rgba(255,255,255,0.55); border: 1px solid var(--border-wood); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.fh-input { background: rgba(255,255,255,0.8) !important; font-size: 0.9rem; }
.fh-pick-btn { border: 1.5px solid var(--accent-gold); background: linear-gradient(135deg, rgba(179,134,34,0.12), rgba(179,134,34,0.04)); color: #7a5c1e; font-weight: 700; font-size: 0.95rem; padding: 9px; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; margin-bottom: 10px; }
.fh-pick-btn:hover { background: linear-gradient(135deg, var(--accent-gold), #96701e); color: #fff; box-shadow: 0 4px 14px rgba(179,134,34,0.4); }
.fh-section-title { font-weight: 700; font-size: 0.88rem; color: #6b5b3e; margin: 12px 0 6px; padding-left: 10px; border-left: 3px solid var(--accent-gold); }
.fh-bottle-item { display: flex; gap: 8px; align-items: flex-start; background: rgba(255,255,255,0.5); border: 1px solid var(--border-wood); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.fh-bicon { color: var(--accent-gold); margin-top: 3px; }
.fh-bcontent { font-size: 0.9rem; color: var(--text-main); white-space: pre-wrap; word-break: break-word; }
.fh-picked-card { background: linear-gradient(135deg, rgba(39,93,52,0.08), rgba(179,134,34,0.08)); border: 1.5px solid var(--accent-gold); border-radius: 12px; padding: 12px; margin-bottom: 10px; animation: fhCardIn 0.4s ease; }
.fh-picked-head { font-weight: 700; color: #275d34; margin-bottom: 6px; }
@keyframes fhCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fh-empty { text-align: center; color: #9a8b70; font-size: 0.85rem; padding: 14px 8px; }
.fh-stats-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 4px; }
.fh-stat-card { background: rgba(255,255,255,0.55); border: 1px solid var(--border-wood); border-radius: 10px; text-align: center; padding: 10px 4px; }
.fh-stat-card .num { font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.fh-stat-card .lbl { font-size: 0.72rem; color: #8a7a5c; margin-top: 2px; }
.fh-stat-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; margin-bottom: 4px; }
.fh-stat-row.me { background: rgba(39,93,52,0.1); }
.fh-medal { width: 26px; text-align: center; font-size: 1rem; }
.fh-rank { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; background: rgba(107,91,62,0.15); border-radius: 50%; font-size: 0.75rem; font-weight: 700; color: #6b5b3e; }
.fh-nick { width: 88px; font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-bar-wrap { flex: 1; height: 10px; background: rgba(107,91,62,0.12); border-radius: 5px; overflow: hidden; }
.fh-bar { height: 100%; background: linear-gradient(90deg, var(--accent-gold), var(--accent)); border-radius: 5px; transition: width 0.6s ease; }
.fh-count { font-size: 0.8rem; font-weight: 700; color: #6b5b3e; min-width: 34px; text-align: right; }
.fh-whisper-item { background: rgba(255,255,255,0.5); border: 1px solid var(--border-wood); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.fh-whisper-head { font-size: 0.75rem; color: #9a8b70; margin-bottom: 4px; }
.fh-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fh-gallery-cell { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; border: 1px solid var(--border-wood); }
.fh-gallery-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.fh-gallery-cell:hover img { transform: scale(1.06); }
.fh-gallery-by { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: 0.68rem; color: #fff; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.55)); }
@media (max-width: 575.98px) { .fh-stats-cards { grid-template-columns: repeat(2, 1fr); } .fh-nick { width: 64px; } }

/* ============================================================
// 连续墨迹分组：同人 5 分钟内连续文本消息收拢显示，hover 浮现时间
// ============================================================ */
.message-row.grouped { margin-top: -14px; margin-bottom: 10px !important; }
.message-row.grouped .msg-avatar { visibility: hidden; }
.message-row.grouped .message-info { display: none; }
.message-row.grouped .message-content-wrapper { position: relative; }

/* ============================================================
// 桌面端自绘古风标题栏（body.tf-desktop 时点亮）
// ============================================================ */
#tf-titlebar { display: none; height: 34px; align-items: center; justify-content: space-between; padding: 0 0 0 12px;
    background: linear-gradient(90deg, #1d2a24, #22332b 55%, #2c2a20); color: #d8cfae; user-select: none;
    -webkit-app-region: drag; border-bottom: 1px solid rgba(179,134,34,0.35); }
body.tf-desktop #tf-titlebar { display: flex; }
body.tf-desktop .app-container, body.tf-desktop .sidebar, body.tf-desktop .workspace-view.active { height: calc(100vh - 34px); }
body.tf-desktop #moments-workspace.active { top: 34px; height: calc(100% - 34px); }
.tf-titlebar-brand { font-size: 0.82rem; letter-spacing: 2px; font-weight: 600; color: #cdbf92; }
.tf-titlebar-controls { display: flex; height: 100%; -webkit-app-region: no-drag; }
.tf-tb-btn { width: 44px; height: 100%; border: none; background: transparent; color: #d8cfae; font-size: 0.72rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.tf-tb-btn:hover { background: rgba(255,255,255,0.12); }
.tf-tb-close:hover { background: #a4372f; color: #fff; }

/* ============================================================
// 全室布局重构 · 翰墨卷（20261033）
// 五区升级：侧栏 / 聊天横梁 / 消息卷面 / 笺纸气泡 / 浮台输入区
// 纯 CSS 覆盖，全部走主题变量，六景自动适配
// ============================================================ */

/* ---- 主题自适应细滚动条（六套皮肤自适配 accent-gold 色系） ---- */
#chat-messages::-webkit-scrollbar, .sidebar-body::-webkit-scrollbar, .fh-panel::-webkit-scrollbar { width: 5px; height: 5px; }
#chat-messages::-webkit-scrollbar-thumb, .sidebar-body::-webkit-scrollbar-thumb, .fh-panel::-webkit-scrollbar-thumb {
    background: var(--accent-gold); border-radius: 3px; opacity: 0.32; transition: opacity 0.2s;
}
#chat-messages::-webkit-scrollbar-thumb:hover, .sidebar-body::-webkit-scrollbar-thumb:hover, .fh-panel::-webkit-scrollbar-thumb:hover { opacity: 0.6; }
#chat-messages::-webkit-scrollbar-track, .sidebar-body::-webkit-scrollbar-track, .fh-panel::-webkit-scrollbar-track { background: transparent; }
/* Firefox 细滚动条（scrollbar-color 接受主题变量） */
.sidebar-body, #chat-messages, .fh-panel { scrollbar-width: thin; scrollbar-color: var(--accent-gold) transparent; }

/* ---- 一、侧栏：墨色层叠 + 描金分隔 ---- */
.sidebar { box-shadow: inset -1px 0 0 rgba(179,134,34,0.28), 4px 0 18px rgba(0,0,0,0.18); }
.session-item { border-radius: 13px; padding: 10px 12px; transition: background 0.22s ease, transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; }
.session-item::before { top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--accent-gold), rgba(179,134,34,0)); box-shadow: 0 0 8px rgba(179,134,34,0.55); }
.session-item.active { box-shadow: 0 4px 16px var(--focus-ring-strong), inset 0 1px 0 rgba(255,255,255,0.18); transform: translateX(2px); }
.session-item .user-avatar:not(img) { border: 1.5px solid rgba(179,134,34,0.6); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.22); }
.session-item img.user-avatar { border: 1.5px solid rgba(255,255,255,0.3); box-shadow: 0 0 0 1px rgba(179,134,34,0.45), 0 2px 7px rgba(0,0,0,0.3); }

/* ---- 二、聊天横梁：卷轴提头 ---- */
.chat-header { background: linear-gradient(180deg, var(--panel-bg), color-mix(in srgb, var(--panel-bg) 92%, #000)); border-bottom: none; box-shadow: 0 1px 0 rgba(179,134,34,0.4), 0 3px 14px rgba(0,0,0,0.06); }
.chat-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(179,134,34,0), rgba(179,134,34,0.65) 18%, rgba(179,134,34,0.65) 82%, rgba(179,134,34,0)); pointer-events: none; }
.chat-header h5, .chat-header .fw-bold { letter-spacing: 1.5px; }

/* ---- 三、消息卷面：宣纸暗角 ---- */
#chat-messages { background-image: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.25), rgba(0,0,0,0) 55%), radial-gradient(ellipse at 50% 100%, rgba(60,45,20,0.07), rgba(0,0,0,0) 45%); }
.message-row { margin-bottom: 14px; }

/* ---- 四、笺纸气泡：不对称圆角 + 描边浮起 ---- */
.message-row.incoming .message-bubble {
    border-radius: 15px 15px 15px 4px;
    border: 1px solid rgba(120,100,60,0.18);
    box-shadow: 0 2px 10px rgba(70,55,25,0.09), inset 0 1px 0 rgba(255,255,255,0.55);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.message-row.outgoing .message-bubble {
    border-radius: 15px 15px 4px 15px;
    border: 1px solid rgba(20,60,35,0.32);
    box-shadow: 0 3px 12px rgba(20,60,35,0.16), inset 0 1px 0 rgba(255,255,255,0.22);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.message-row.incoming .message-bubble:hover, .message-row.outgoing .message-bubble:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(70,55,25,0.14), inset 0 1px 0 rgba(255,255,255,0.55); }
.message-row.outgoing .message-bubble:hover { box-shadow: 0 6px 18px rgba(20,60,35,0.2), inset 0 1px 0 rgba(255,255,255,0.22); }
.msg-avatar { border: 1.5px solid rgba(179,134,34,0.55); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.22), 0 2px 8px rgba(0,0,0,0.14); }

/* ---- 五、输入浮台 ---- */
.chat-input-area { background: linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 94%, #fff), var(--panel-bg)); border-top: none; box-shadow: 0 -1px 0 rgba(179,134,34,0.4), 0 -4px 14px rgba(0,0,0,0.04); }
.chat-input-area textarea { border-radius: 13px !important; border: 1.5px solid var(--border-wood) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.chat-input-area textarea:focus { border-color: var(--accent-gold) !important; box-shadow: 0 0 0 3px var(--focus-ring-strong) !important; outline: none; }
.chat-input-area .btn-success { border: 1px solid rgba(179,134,34,0.55); box-shadow: 0 3px 10px rgba(30,80,45,0.28), inset 0 1px 0 rgba(255,255,255,0.25); letter-spacing: 3px; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.chat-input-area .btn-success:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 5px 14px rgba(30,80,45,0.34), inset 0 1px 0 rgba(255,255,255,0.25); }
.chat-input-area .btn-success:active { transform: translateY(0); }

/* 分组墨迹行在重构下的收拢节奏 */
.message-row.grouped { margin-top: -12px; margin-bottom: 11px !important; }

/* ============================================================
// 卷面背景 · 水墨宣纸（20261034）
// 五层叠加：金墨晕染 ×2 + 青苔墨晕 + 宣纸帘纹（横竖交织）+ 原暗角
// 全部半透明中性色叠加在原背景色上，六景主题自动协调
// ============================================================ */
#chat-messages {
    background-image:
        radial-gradient(ellipse 1200px 800px at 85% 10%, rgba(160,120,40,0.05), rgba(0,0,0,0) 62%),
        radial-gradient(ellipse 1000px 700px at 10% 32%, rgba(72,92,64,0.045), rgba(0,0,0,0) 64%),
        radial-gradient(ellipse 900px 900px at 80% 90%, rgba(142,102,52,0.04), rgba(0,0,0,0) 60%),
        repeating-linear-gradient(0deg, rgba(122,92,42,0.016) 0px, rgba(122,92,42,0.016) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
        repeating-linear-gradient(90deg, rgba(122,92,42,0.013) 0px, rgba(122,92,42,0.013) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.25), rgba(0,0,0,0) 55%),
        radial-gradient(ellipse at 50% 100%, rgba(60,45,20,0.07), rgba(0,0,0,0) 45%);
}
/* 中央水印：金石气落款 */
.chat-watermark { letter-spacing: 9px; text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 2px 10px rgba(120,90,40,0.14); font-weight: 600; }

/* ============================================================
// 全室精装修 · 墨章金扣（20261035）
// 顶部功能组统一描金石章 / 弹窗描金 / 滚动玉扣 / 展卷笺条
// ============================================================ */

/* ---- 一、顶部功能按钮组：五色归一为描金石章 ---- */
.chat-header .btn { border-radius: 999px !important; font-weight: 600; letter-spacing: 1px;
    background: transparent !important; border: 1.5px solid rgba(120,100,60,0.4) !important;
    color: #6b5b3e !important; box-shadow: none !important; padding: 4px 12px !important;
    transition: all 0.2s ease !important; }
.chat-header .btn i { color: #96701e !important; transition: color 0.2s ease; }
.chat-header .btn:hover { background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
    border-color: transparent !important; color: #fff !important; box-shadow: 0 4px 12px var(--focus-ring-strong) !important; }
.chat-header .btn:hover i { color: #ffe9b8 !important; }
.chat-header .btn .d-none.d-sm-inline { font-size: 0.82rem; }

/* ---- 二、弹窗：描金笺匣 ---- */
.modal-content-custom { border: 1.5px solid rgba(179,134,34,0.5) !important; border-radius: 16px !important;
    box-shadow: 0 18px 50px rgba(30,22,8,0.3), 0 0 0 4px rgba(179,134,34,0.08), inset 0 1.5px 0 rgba(255,255,255,0.4) !important; }
.modal-content-custom::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, rgba(179,134,34,0), rgba(179,134,34,0.7), rgba(179,134,34,0)); border-radius: 2px; }

/* ---- 三、回到底部玉扣 ---- */
#scroll-bottom-pill { border: 1.5px solid rgba(179,134,34,0.55); box-shadow: 0 6px 18px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease; }
#scroll-bottom-pill:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.2); }

/* ---- 四、展卷笺条（上翻加载历史） ---- */
.history-loader-bar { border: 1px dashed rgba(179,134,34,0.4) !important; background: linear-gradient(180deg, rgba(179,134,34,0.08), rgba(179,134,34,0.03)) !important;
    border-radius: 999px !important; color: #8a6d3b !important; letter-spacing: 1px; }

/* ---- 五、输入区工具图标：悬停描金 ---- */
.chat-input-area label i, .chat-input-area i[class*="fa-"] { transition: color 0.18s ease, transform 0.18s ease; }
.chat-input-area label:hover i, .chat-input-area i[class*="fa-"]:hover { color: var(--accent-gold); transform: translateY(-1px); }

/* ============================================================
// 点睛 · 墨签与日期框（20261036）
// ============================================================ */

/* ---- 时间/日期分隔：居中墨签 ---- */
.msg-date-divider, .msg-time-divider {
    display: block; width: fit-content; margin: 6px auto 14px !important;
    padding: 3px 16px; text-align: center;
    background: linear-gradient(180deg, rgba(179,134,34,0.1), rgba(179,134,34,0.04));
    border: 1px solid rgba(179,134,34,0.32); border-radius: 999px;
    color: #8a6d3b !important; font-size: 0.74rem !important; letter-spacing: 2px; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.msg-date-divider { padding: 4px 20px; letter-spacing: 4px; border-color: rgba(179,134,34,0.45); }

/* ---- 聊天头部日期选择框：融入石章体系 ---- */
#chat-date-picker {
    background: transparent !important; border: 1.5px solid rgba(120,100,60,0.4) !important; border-radius: 999px !important;
    padding: 3px 12px !important; color: #6b5b3e !important; height: 30px; cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#chat-date-picker:hover, #chat-date-picker:focus { border-color: var(--accent-gold) !important; box-shadow: 0 0 0 3px var(--focus-ring-strong); outline: none; }

/* ---- 聊天头部会话题名：金菱引子 ---- */
.chat-header h5::before, .chat-header .fw-bold::before { content: '◆'; font-size: 0.6em; color: var(--accent-gold); margin-right: 9px; vertical-align: 2px; opacity: 0.85; }

/* ============================================================
// 阁主主事台 · 三笺片布局（20261038）
// ============================================================ */
.admin-section { background: linear-gradient(180deg, rgba(179,134,34,0.06), rgba(179,134,34,0.02)); border: 1px solid rgba(179,134,34,0.32); border-radius: 13px; padding: 13px 15px; margin-bottom: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }
.admin-section:last-of-type { margin-bottom: 10px; }
.admin-section-title { font-weight: 700; letter-spacing: 2px; color: #6b5b3e; margin-bottom: 11px; font-size: 0.92rem; display: flex; align-items: center; }
.admin-section-title::before { content: '◆'; color: var(--accent-gold); font-size: 0.68em; margin-right: 9px; }
.admin-grid { background: rgba(255,255,255,0.45); border: 1px dashed rgba(179,134,34,0.35) !important; border-radius: 9px; max-height: 140px; overflow-y: auto; margin-bottom: 10px; }
.admin-users { background: rgba(255,255,255,0.45); border: 1px dashed rgba(179,134,34,0.3); border-radius: 9px; max-height: 168px; overflow-y: auto; padding: 8px 10px; }
/* 用户行防溢出：允许换行、内部块可收缩、长名截断 */
.admin-users > div { flex-wrap: wrap; min-width: 0; }
.admin-users .d-flex { min-width: 0; }
.admin-users .fw-bold { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 主事台 v2.1：定高双栏（弹窗不超高，列表内部滚动） ---- */
.admin-modal-v2 { padding: 20px 22px; }
.admin-v2-grid { display: flex; gap: 14px; align-items: stretch; height: min(64vh, 580px); min-height: 320px; }
.admin-v2-left { flex: 1.15; min-width: 0; margin-bottom: 0 !important; display: flex; flex-direction: column; }
.admin-v2-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.admin-v2-left .admin-users { flex: 1; max-height: none; min-height: 0; overflow-y: auto; }
.admin-v2-right .admin-section:first-child { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.admin-v2-right .admin-section:first-child .admin-grid { flex: 1; max-height: none; min-height: 0; overflow-y: auto; }
.admin-v2-right .admin-section:last-child { flex-shrink: 0; }
.admin-v2-right .admin-section .input-group { margin-top: 10px; flex-shrink: 0; }
.admin-recruit-input { margin-bottom: 8px; }
/* 名单单行紧凑：昵称区弹性截断，控件右贴不换行 */
.admin-users > div { flex-wrap: nowrap !important; padding: 6px 4px !important; }
.admin-users > div > div:first-child { flex: 1; }
.admin-users .user-avatar { border-radius: 9px; }
@media (max-width: 767.98px) {
    .admin-v2-grid { flex-direction: column; height: auto; }
    .admin-v2-left .admin-users { max-height: 200px; }
    .admin-v2-right .admin-section:first-child .admin-grid { max-height: 140px; flex: none; }
}
/* 手机窄屏：显式断点隐藏文字只留箭头（不依赖框架类），返回钮强制第一行最左且加大触控面积 */
@media (max-width: 575.98px) {
    .moments-back-btn span { display: none; }
    .moments-back-btn { order: -1; padding: 9px 13px; font-size: 1rem; }
}
.call-modal { padding: 34px 24px 30px; }
.call-avatar-ring { width: 110px; height: 110px; margin: 0 auto 14px; border-radius: 50%; padding: 5px; border: 3px solid var(--accent-gold); background: var(--paper-bg); animation: callRingBreath 2.4s ease-in-out infinite; }
.call-ring-incoming { border-color: var(--accent); animation-duration: 1.5s; }
.call-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--avatar-bg); }
@keyframes callRingBreath { 0%, 100% { box-shadow: 0 0 0 0 var(--focus-ring-strong); } 50% { box-shadow: 0 0 0 14px rgba(0,0,0,0); } }
.call-action-btn { width: 70px; height: 70px; border-radius: 50%; border: none; color: #fff; font-size: 1.45rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; transition: transform 0.2s ease; }
.call-action-btn:hover { transform: translateY(-3px); }
.call-action-btn .call-action-label { font-size: 0.72rem; letter-spacing: 2px; font-family: 'Noto Serif SC', serif; }
.call-accept { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); animation: callBtnPulse 1.5s ease-in-out infinite; }
.call-decline, .call-hangup { background: linear-gradient(135deg, #bc4749, var(--danger-deep)); }
@keyframes callBtnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(39, 93, 52, 0.45); } 50% { box-shadow: 0 0 0 12px rgba(39, 93, 52, 0); } }

/* ===== 应用更新进度条（古风墨卷） ===== */
.tf-progress-track { height: 14px; border-radius: 8px; background: var(--input-bg); border: 1px solid var(--border-wood); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); }
.tf-progress-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--accent), var(--accent-gold)); transition: width 0.25s ease; box-shadow: 0 0 8px var(--focus-ring-strong); }

/* ============================================================
// 安卓端专项 v2：底部导航 + 触屏体验（仅 ≤768px 生效）
// ============================================================ */
#mobile-tabbar { display: none; }
@media (max-width: 768px) {
    /* 底部导航栏：宣纸底 + 描金顶线，四栏等分 */
    #mobile-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500;
        display: flex; background: var(--paper-bg);
        border-top: 1px solid rgba(179, 134, 34, 0.45);
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mtb-item {
        flex: 1; text-align: center; padding: 7px 0 6px; cursor: pointer;
        color: var(--text-main); opacity: 0.72; font-size: 0.62rem; letter-spacing: 1px;
        font-family: 'Noto Serif SC', serif; position: relative;
        -webkit-tap-highlight-color: transparent; user-select: none;
    }
    .mtb-item i { display: block; font-size: 1.05rem; margin-bottom: 2px; color: var(--accent); }
    .mtb-item:active { opacity: 1; background: rgba(179, 134, 34, 0.08); }
    .mtb-item #mtb-unread {
        display: none; position: absolute; top: 3px; right: calc(50% - 20px);
        min-width: 16px; height: 16px; line-height: 16px; border-radius: 9px;
        background: #bc4749; color: #fff; font-size: 0.6rem; font-style: normal;
        padding: 0 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    /* 键盘弹起时收起导航，把屏幕还给输入与消息 */
    body.kb-open #mobile-tabbar { display: none; }
    /* 键盘弹起时聊天区高度硬收敛由 utils.js 直接操作 style 完成（规避 CSS 变量在部分旧 WebView 上不生效的问题） */
    /* 输入区为底部导航让位（原 8px + 安全区 → 叠加栏高） */
    .chat-input-area { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
    body.kb-open .chat-input-area { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; }
    /* 消息长按不触发系统呼出框，操作统一走自绘菜单 */
    .message-row { -webkit-touch-callout: none; }
    /* 侧栏抽屉底部同样为导航让位 */
    .sidebar { padding-bottom: 54px; }
}

/* ============================================================
   墨韵 2.0（20261051）：遍召同席 / 墨萃 / 击节 / 新墨浮标 / 卷面字号
   ============================================================ */

/* ---- 一、遍召同席（@全体同席镀金高亮 + 补全弹窗金印项） ---- */
.mention-all {
    background: rgba(179, 134, 34, 0.15);
    color: var(--accent-gold);
    border: 1px solid rgba(179, 134, 34, 0.55);
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 700;
}
.mention-all-item { color: var(--gold-soft-text); font-weight: 600; }
.mention-all-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    font-size: 0.78rem;
    background: rgba(179, 134, 34, 0.14);
    border: 1px solid rgba(179, 134, 34, 0.4);
}

/* ---- 二、墨萃清单（金菱引子 + 珠玑摘句） ---- */
.es-item {
    position: relative; padding: 8px 26px 8px 10px;
    border: 1px solid var(--border-wood); border-radius: 8px;
    background: var(--paper-bg); cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.es-item:hover { background: var(--soft-hover); border-color: var(--accent-gold); }
.es-quote { font-size: 0.85rem; color: var(--text-main); line-height: 1.55; word-break: break-all; }
.es-gem { color: var(--accent-gold); font-size: 0.68rem; margin-right: 6px; vertical-align: 1px; }
.es-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }
.es-remove { position: absolute; top: 6px; right: 8px; font-size: 0.75rem; color: var(--text-muted); padding: 4px; }
.es-remove:hover { color: var(--danger); }

/* ---- 三、卷面字号三档（中档为默认；em 缩放卷面，rem 之子题随档微调） ---- */
body.fs-small .chat-messages { font-size: 0.87em; }
body.fs-large .chat-messages { font-size: 1.13em; }
body.fs-small .chat-messages .message-bubble { font-size: 0.83rem; }
body.fs-large .chat-messages .message-bubble { font-size: 1.08rem; }
.font-scale-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 9px 3px; margin-top: 4px;
    border-top: 1px dashed var(--border-wood);
}
.font-scale-row .fs-label { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 2px; }
.font-scale-row .fs-btns { display: flex; gap: 4px; }
.font-scale-row .fs-btn {
    border: 1px solid var(--border-wood); background: transparent; color: var(--text-main);
    font-size: 0.75rem; padding: 2px 10px; border-radius: 10px; cursor: pointer;
    font-family: 'Noto Serif SC', serif; transition: all 0.15s;
}
.font-scale-row .fs-btn:hover { background: var(--soft-bg); }
.font-scale-row .fs-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================
   雅集四新（20261055）：每日雅句 / @唤友墨签与小标 / 画卷留影
   ============================================================ */

/* ---- 一、每日雅句：水印区按日轮换唐宋名句（颜色承水印底色，淡墨见雅） ---- */
.daily-quote-line { font-size: 2rem; line-height: 1.55; opacity: 0.45; }
.daily-quote-from { font-size: 0.82rem; margin-top: 10px; opacity: 0.6; color: var(--text-muted); }

/* ---- 二、@唤友：墨签高亮（本人被 @ 得金印加粗）与会话列表「@」金签 ---- */
.mention-tag {
    background: var(--divider-bg);
    color: var(--accent);
    border: 1px solid var(--border-wood);
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 700;
}
.mention-tag-me {
    background: rgba(0, 0, 0, 0.08);
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}
.mention-flag {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem; min-width: 15px; height: 15px; padding: 0 4px;
    margin-left: 4px; border-radius: 8px; font-weight: 700; line-height: 1;
    background: var(--accent-gold); color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); flex-shrink: 0;
}

/* ---- 三、画卷：会话留影网格（缩略方格 + 悬浮落款 + 响应式） ---- */
.gallery-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    max-height: 62vh; overflow-y: auto; padding: 4px 2px;
}
.gallery-item {
    position: relative; aspect-ratio: 1 / 1; border-radius: 8px;
    overflow: hidden; cursor: pointer;
    border: 1px solid var(--border-wood); background: var(--input-bg);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item-meta {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 16px 8px 5px; font-size: 0.68rem; text-align: center;
    color: #ffffff; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
    opacity: 0; transition: opacity 0.18s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gallery-item:hover .gallery-item-meta { opacity: 1; }
.gallery-empty {
    grid-column: 1 / -1; text-align: center;
    color: var(--text-muted); padding: 36px 0;
    font-size: 0.9rem; letter-spacing: 2px;
}
@media (max-width: 640px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
}

/* ============================================================
   雅集四新（20261056）：传铃阁 / 备注笺 / 未读分隔线 / 每日点卯
   色彩纪律：仅用 var(--xxx) 与中性黑白透明 rgba
   ============================================================ */

/* ---- 一、传铃阁：铃铛角标 + 传讯笺卡 ---- */
.notify-badge {
    position: absolute; top: -5px; right: -7px;
    min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: 9px; background: var(--danger); color: #ffffff;
    font-size: 0.62rem; font-weight: 700; line-height: 15px; text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    align-items: center; justify-content: center;
}
.notify-item {
    position: relative; display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 12px; border-radius: 10px; cursor: pointer;
    border: 1px solid transparent; transition: background 0.18s;
}
.notify-item:hover { background: rgba(0, 0, 0, 0.04); }
.notify-item.unread { background: rgba(0, 0, 0, 0.03); padding-right: 26px; }
.notify-icon {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--soft-bg); color: var(--accent);
    border: 1px solid var(--border-wood);
}
.notify-main { flex: 1 1 auto; min-width: 0; }
.notify-title-line {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.notify-title { font-weight: 700; color: var(--text-main); font-size: 0.9rem; }
.notify-time { flex: 0 0 auto; color: var(--text-muted); font-size: 0.7rem; }
.notify-content {
    color: var(--text-muted); font-size: 0.82rem; margin-top: 2px;
    word-break: break-word; line-height: 1.5;
}
.notify-dot {
    position: absolute; top: 13px; right: 11px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger);
}
.notify-empty {
    text-align: center; color: var(--text-muted);
    padding: 34px 12px; font-size: 0.9rem; letter-spacing: 1px;
}

/* ---- 二、未读消息分隔线：横幅入流随文滚动，点击奔赴最新 ---- */
.unread-divider {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 10px 6px; padding: 6px 14px; border-radius: 999px;
    background: var(--divider-bg); color: var(--accent);
    font-size: 0.78rem; cursor: pointer; border: 1px solid var(--border-wood);
    transition: background 0.2s;
}
.unread-divider:hover { background: var(--divider-hover-bg); }
.unread-divider span { font-weight: 700; letter-spacing: 1px; }
.unread-divider i { font-size: 0.72rem; }

/* ---- 三、每日点卯：未签淡红点 + 签文卡 + 大按钮 + 月历 ---- */
.checkin-pending { position: relative; }
.checkin-pending::after {
    content: ''; position: absolute; top: -2px; right: -3px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--danger); opacity: 0.8;
    box-shadow: 0 0 0 1.5px var(--sidebar-header);
}
.checkin-loading {
    text-align: center; color: var(--text-muted);
    padding: 30px 10px; font-size: 0.9rem;
}
.checkin-fortune-card {
    background: var(--soft-bg); border: 1px solid var(--border-wood);
    border-radius: 12px; padding: 18px 16px; text-align: center;
}
.checkin-fortune-title { color: var(--accent); font-size: 1rem; margin-bottom: 8px; }
.checkin-fortune-text {
    color: var(--text-main); font-size: 1.25rem; line-height: 1.8;
}
.checkin-streak { margin-top: 10px; color: var(--text-muted); font-size: 0.8rem; }
.checkin-action-wrap { text-align: center; padding: 6px 0 12px; }
.checkin-submit-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: #ffffff; border: none; border-radius: 10px;
    padding: 12px 34px; font-size: 1.3rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    transition: all 0.2s;
}
.checkin-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}
.checkin-cal-title {
    text-align: center; color: var(--text-main);
    font-size: 1rem; margin: 16px 0 8px; letter-spacing: 2px;
}
.checkin-calendar {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
}
.cc-head {
    text-align: center; color: var(--text-muted);
    font-size: 0.75rem; padding: 3px 0;
}
.cc-cell {
    display: flex; align-items: center; justify-content: center; gap: 3px;
    aspect-ratio: 1; border-radius: 8px; border: 1px solid transparent;
    color: var(--text-muted); font-size: 0.82rem;
}
.cc-cell.empty { border: none; }
.cc-cell.today {
    border-color: var(--accent-gold); background: var(--divider-bg);
    color: var(--text-main); font-weight: 700;
}
.cc-cell.checked { color: var(--accent); }
.cc-mark { font-size: 0.66rem; }
.cc-date { line-height: 1; }

/* ============================================================
   雅用折匣（20261057）：侧栏顶部功能图标收纳抽屉
   色彩纪律：仅用 var(--xxx) 与中性黑白透明 rgba
   ============================================================ */
.fn-drawer {
    position: absolute; top: 78px; left: 10px; right: 10px;
    max-height: 0; opacity: 0; transform: translateY(-8px);
    overflow: hidden; pointer-events: none;
    background: var(--sidebar-bg);
    border: 1px solid transparent; border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
    z-index: 80; padding: 0 6px;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease,
                transform 0.26s ease, padding 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s ease;
}
.fn-drawer.show {
    max-height: 560px; opacity: 1; transform: none;
    pointer-events: auto; padding: 6px;
    border-color: var(--sidebar-divider);
}
.fn-drawer-item {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 8px; cursor: pointer;
    color: var(--sidebar-text); transition: background 0.18s ease, color 0.18s ease;
}
.fn-drawer-item:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-hover-text); }
.fn-drawer-item > i, .fn-drawer-item .fdi-icon {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; background: rgba(255, 255, 255, 0.06);
    color: var(--accent-gold); transition: color 0.18s ease;
}
.fn-drawer-item:hover > i { color: var(--accent-gold); }
.fdi-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fdi-name {
    display: block; font-family: 'Ma Shan Zheng', cursive;
    font-size: 1.04rem; line-height: 1.3; letter-spacing: 1.5px;
    color: var(--sidebar-header-text);
}
.fdi-desc {
    display: block; font-size: 0.72rem; line-height: 1.4;
    color: var(--sidebar-section); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fn-drawer-item.fn-drawer-logout > i,
.fn-drawer-item.fn-drawer-logout .fdi-icon { color: var(--danger); }
.fn-drawer-item.fn-drawer-logout .fdi-name { color: var(--danger); }
.fn-drawer-item.fn-drawer-logout:hover { background: rgba(255, 255, 255, 0.07); }

/* ============================================================
   气泡妆奁（20261057）：择一款墨迹气泡 · 全成员免费
   十二款皮肤 + 素笺复原卡；incoming/outgoing 通用，深色皮肤自带浅字
   ============================================================ */
.bubble-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    max-height: 62vh; overflow-y: auto; padding: 4px 2px;
}
.bubble-card {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 10px 6px 9px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--border-wood); background: var(--panel-bg);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.bubble-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); border-color: var(--accent-gold); }
.bubble-card.selected {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 1.5px var(--accent-gold), 0 6px 16px rgba(0, 0, 0, 0.08);
}
.bubble-card-name {
    font-family: 'Ma Shan Zheng', cursive; font-size: 0.92rem;
    color: var(--text-main); letter-spacing: 1px;
}
.bubble-card.selected .bubble-card-name { color: var(--accent-gold); }
/* 妆奁预览小气泡：固定尺寸复用皮肤背景；素笺为默认纸色 */
.message-bubble.skin-preview {
    width: 88px; height: 56px; min-height: 56px; max-width: 100%;
    border-radius: 10px; margin: 0;
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    font-family: 'Ma Shan Zheng', cursive; font-size: 1rem; letter-spacing: 2px;
    background: var(--bubble-in); color: var(--bubble-in-text);
    border: 1px solid var(--border-wood);
}

/* ---- 十二款墨迹气泡皮肤 ----
   选择器带 .message-row 前缀的同权重规则置于文件末尾，
   以级联顺序覆盖 incoming/outgoing 默认底色，两向皆可读 */
/* 宣纸：米白纤维纸纹（SVG 素材） */
.message-bubble.bubble-skin-xuanzhi,
.message-row .message-bubble.bubble-skin-xuanzhi {
    background: var(--panel-bg) url('/static/img/bubbles/paper.svg?v=1') repeat;
    background-size: 120px 120px;
    color: var(--text-main); border-color: var(--border-wood);
}
/* 竹简：竖条竹片 + 上下节点（SVG 素材），大圆角仿卷册 */
.message-bubble.bubble-skin-zhujian,
.message-row .message-bubble.bubble-skin-zhujian {
    background: var(--paper-bg) url('/static/img/bubbles/bamboo.svg?v=1') repeat;
    background-size: 96px 96px;
    color: var(--text-main); border-color: var(--border-wood);
    border-radius: 16px;
}
/* 绢帛：柔和对角织纹渐变 */
.message-bubble.bubble-skin-juanbo,
.message-row .message-bubble.bubble-skin-juanbo {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(0, 0, 0, 0.045) 55%, rgba(255, 255, 255, 0.4) 100%), var(--paper-bg);
    color: var(--text-main); border-color: var(--border-wood);
}
/* 墨玉：深玉底浅字（墨色近纸色文字为可读性所需，属中性色） */
.message-bubble.bubble-skin-moyu,
.message-row .message-bubble.bubble-skin-moyu {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.28) 100%), var(--gfw-bg);
    color: #f5f1e6; border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
/* 柳荫：淡绿烟霭（自然景致低饱和 rgba） */
.message-bubble.bubble-skin-liuyin,
.message-row .message-bubble.bubble-skin-liuyin {
    background: linear-gradient(160deg, rgba(96, 140, 90, 0.20) 0%, rgba(96, 140, 90, 0.07) 100%), var(--panel-bg);
    color: var(--text-main); border-color: rgba(96, 140, 90, 0.38);
}
/* 朱砂：白底 + 左侧朱红粗边 */
.message-bubble.bubble-skin-zhusha,
.message-row .message-bubble.bubble-skin-zhusha {
    background: var(--panel-bg); color: var(--text-main);
    border: 1px solid var(--border-wood); border-left: 4px solid var(--danger);
}
/* 青花：白瓷底 + 靛蓝缠枝波纹（SVG 素材） */
.message-bubble.bubble-skin-qinghua,
.message-row .message-bubble.bubble-skin-qinghua {
    background: var(--panel-bg) url('/static/img/bubbles/porcelain.svg?v=1') repeat;
    background-size: 110px 110px;
    color: var(--text-main); border-color: var(--border-wood);
}
/* 桃夭：淡粉春霭（自然景致低饱和 rgba） */
.message-bubble.bubble-skin-taoyao,
.message-row .message-bubble.bubble-skin-taoyao {
    background: linear-gradient(160deg, rgba(214, 130, 140, 0.22) 0%, rgba(214, 130, 140, 0.08) 100%), var(--panel-bg);
    color: var(--text-main); border-color: rgba(214, 130, 140, 0.42);
}
/* 雪笺：近白霜面 + 霜环 */
.message-bubble.bubble-skin-xuejian,
.message-row .message-bubble.bubble-skin-xuejian {
    background: rgba(255, 255, 255, 0.94);
    color: var(--text-main); border-color: var(--border-wood);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65), 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* 烟雨：灰蓝雨霭（自然景致低饱和 rgba） */
.message-bubble.bubble-skin-yanyu,
.message-row .message-bubble.bubble-skin-yanyu {
    background: linear-gradient(160deg, rgba(100, 120, 145, 0.26) 0%, rgba(100, 120, 145, 0.09) 100%), var(--panel-bg);
    color: var(--text-main); border-color: rgba(100, 120, 145, 0.4);
}
/* 鎏金：金细双边框 */
.message-bubble.bubble-skin-liujin,
.message-row .message-bubble.bubble-skin-liujin {
    background: var(--paper-bg); color: var(--text-main);
    border: 4px double var(--accent-gold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
/* 梅雨：低饱和灰紫雨丝（SVG 素材，透底衬主题纸色） */
.message-bubble.bubble-skin-meiyu,
.message-row .message-bubble.bubble-skin-meiyu {
    background: var(--panel-bg) url('/static/img/bubbles/rain.svg?v=1') repeat;
    background-size: 84px 84px;
    color: var(--text-main); border-color: var(--border-wood);
}

/* ---- 折匣与妆奁：移动端紧凑化 ---- */
@media (max-width: 768px) {
    .fn-drawer { top: 66px; left: 6px; right: 6px; }
    .fn-drawer-item { padding: 8px 10px; gap: 10px; }
    .fn-drawer.show { max-height: 480px; }
}
@media (max-width: 640px) {
    .bubble-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
}

/* ============================================================
// 界面雅饰 · 远山浮云角花篇（20261058）
// 纯增量：只用 var(--xxx) 与中性 rgba(黑/白透明)；
// 装饰层 pointer-events:none，淡雅不遮内容，六套皮肤变量自适配
// ============================================================ */

/* ---- 1. 聊天区背景：单一淡色（用户定稿；原先的山景/七层渐变均去） ---- */
#chat-messages {
    background: var(--chat-bg-a);
}

/* ---- 2. 四角角花：已按用户要求移除 ---- */

/* ---- 3. 侧栏装饰 ---- */
/* 侧栏头底部双线纹（金线 + 分隔色线）；仅追加 position 以承载伪元素 */
.sidebar-header { position: relative; }
.sidebar-header::after {
    content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,0), var(--accent-gold) 50%, rgba(0,0,0,0)) top center / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(255,255,255,0), var(--sidebar-divider) 25%, var(--sidebar-divider) 75%, rgba(255,255,255,0)) bottom center / 100% 1px no-repeat;
}
/* 昵称左侧小印信 */
#current-user-display::before {
    content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 9px; vertical-align: -1px; border-radius: 2px;
    background: rgba(180,42,42,0.85); /* 印泥红：古风印信语义色（白文印底） */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.3);
}
/* 侧栏底部回纹细条（贴底于状态条上沿，不遮列表点击） */
.sidebar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 40px; height: 12px; z-index: 2;
    background: url('/static/img/decor/pattern-thin.svg') repeat-x center / auto 12px;
    opacity: 0.15; pointer-events: none;
}
/* 分区标题文尾花点与子分组头金叶点：已按用户要求移除 */

/* ---- 4. 会话项精修（圆角/位移旧段已有，此处加竖条展开动画与 active 白竖条） ---- */
.session-item::before {
    transform: scaleY(0); opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.session-item:hover::before, .session-item.active::before { transform: scaleY(1); opacity: 1; }
.session-item.active::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
    box-shadow: none;
}
/* 好友子分组头装饰：已按用户要求移除 */

/* ---- 5. 时间分隔线：细线 — 文字 — 细线 ---- */
.msg-time-divider {
    display: flex !important; align-items: center; justify-content: center; gap: 10px;
    width: auto; margin: 10px auto 6px !important; padding: 0 !important;
    background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
    color: var(--divider-text-2) !important; font-size: 0.68rem !important; letter-spacing: 2px; font-weight: 400;
    opacity: 0.92;
}
.msg-time-divider::before, .msg-time-divider::after {
    content: ''; width: 58px; height: 1px; flex-shrink: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0), var(--divider-text));
}
.msg-time-divider::after { background: linear-gradient(90deg, var(--divider-text), rgba(0,0,0,0)); }

/* ---- 6. 输入区「案台」 ---- */
.chat-input-area {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 10px 26px rgba(0,0,0,0.035),
        0 -1px 0 var(--accent-gold),
        0 -4px 14px rgba(0,0,0,0.04);
    transition: box-shadow 0.25s ease;
}
/* 落笔时案台泛极淡金晕（沿用主题焦点环色） */
.chat-input-area:focus-within {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 0 22px var(--focus-ring-strong),
        0 -1px 0 var(--accent-gold),
        0 -4px 14px rgba(0,0,0,0.04);
}
/* textarea 左上角小墨点（背景图，不动占位文案） */
.chat-input-area textarea {
    background-image: radial-gradient(circle, rgba(0,0,0,0.28) 1.3px, rgba(0,0,0,0) 1.7px);
    background-repeat: no-repeat; background-position: 10px 11px;
    padding-left: 20px;
}
/* 工具条顶淡分隔 */
.input-toolbar { position: relative; }
.input-toolbar::before {
    content: ''; position: absolute; top: -6px; left: 2px; right: 2px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,0), var(--border-wood) 18%, var(--border-wood) 82%, rgba(0,0,0,0));
    opacity: 0.65;
}

/* ---- 7. 聊天头部装饰：两端 CSS 渐变小三角（背景层，天然不遮点击；不移动旧 ::after 金线） ---- */
.chat-header {
    background-image:
        linear-gradient(225deg, color-mix(in srgb, var(--accent-gold) 40%, transparent) 0 48%, rgba(0,0,0,0) 52%),
        linear-gradient(315deg, color-mix(in srgb, var(--accent-gold) 40%, transparent) 0 48%, rgba(0,0,0,0) 52%),
        linear-gradient(180deg, var(--panel-bg), color-mix(in srgb, var(--panel-bg) 92%, rgba(0,0,0,1)));
    background-position: left 6px top 5px, right 6px top 5px, 0 0;
    background-size: 9px 9px, 9px 9px, 100% 100%;
    background-repeat: no-repeat;
}

/* ---- 8. 登录屏升级 ---- */
/* 深墨底 + 宣纸细网 */
#login-screen {
    background-color: rgba(15,17,21,0.82);
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 4px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 4px);
}
/* 底部大山脉剪影 */
#login-screen::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url('/static/img/decor/mountains.svg') bottom center / 1400px auto repeat-x;
    opacity: 0.14;
}
/* 登录屏最素版：只保留远山剪影，云层已去 */
/* 登录卡片：金边、大圆角、双层阴影、入场淡入；z1 浮于远山上 */
#login-screen .modal-content-custom {
    position: relative; z-index: 1;
    border: 1px solid var(--accent-gold) !important; border-radius: 20px !important;
    box-shadow:
        0 26px 60px rgba(0,0,0,0.5),
        0 0 0 6px rgba(255,255,255,0.05),
        inset 0 1.5px 0 rgba(255,255,255,0.45) !important;
    animation: tfLoginCardIn 0.7s cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes tfLoginCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 标题左右金色花纹短线（内端花点） */
#login-screen h2 { position: relative; }
#login-screen h2::before, #login-screen h2::after {
    content: ''; position: absolute; top: 52%; width: 52px; height: 5px; pointer-events: none;
}
#login-screen h2::before {
    left: 0;
    background:
        radial-gradient(circle, var(--accent-gold) 1.8px, rgba(0,0,0,0) 2.3px) right center / 5px 5px no-repeat,
        linear-gradient(90deg, rgba(0,0,0,0), var(--accent-gold)) left center / calc(100% - 8px) 1.4px no-repeat;
}
#login-screen h2::after {
    right: 0;
    background:
        radial-gradient(circle, var(--accent-gold) 1.8px, rgba(0,0,0,0) 2.3px) left center / 5px 5px no-repeat,
        linear-gradient(90deg, var(--accent-gold), rgba(0,0,0,0)) right center / calc(100% - 8px) 1.4px no-repeat;
}
/* 标题介绍区下加篆印「听风轩」 */
#login-screen .modal-content-custom > div.mb-4::after {
    content: ''; display: block; width: 44px; height: 44px; margin: 12px auto 0; pointer-events: none;
    background: url('/static/img/decor/seal.svg') center / contain no-repeat;
}
/* 输入框聚焦金色 */
#login-screen .form-control { border-color: var(--border-wood); }
#login-screen .form-control:focus {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* ---- 雅饰移动端适配 ---- */
@media (max-width: 768px) {
    .msg-time-divider::before, .msg-time-divider::after { width: 34px; }
    /* 头部小三角移动端隐藏（避让密集按钮） */
    .chat-header {
        background-image: linear-gradient(180deg, var(--panel-bg), color-mix(in srgb, var(--panel-bg) 92%, rgba(0,0,0,1)));
    }
    /* 登录屏山脉与装饰适配 */
    #login-screen::before { background-size: 980px auto; }
    #login-screen .modal-content-custom > div.mb-4::after { width: 36px; height: 36px; }
}
@media (max-width: 520px) {
    #login-screen h2::before, #login-screen h2::after { display: none; }
}

/* ---- 尊重减弱动效偏好 ---- */
@media (prefers-reduced-motion: reduce) {
    #login-screen .modal-content-custom { animation: none !important; }
}

/* ============================================================
   方案B · 单轴流：侧栏统一会话流 + 底部「同席录」入口 + 同席录浮层
   ============================================================ */
/* 统一会话流：群与友合并单列，占满检索行之下、名录入口之上的余量 */
.unified-sessions { flex: 1 1 0%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* 底部固定「同席录」入口行：古风笺卡样式，悬停微移 */
.roster-entry-row { flex-shrink: 0; display: flex; align-items: center; gap: 10px; margin: 6px 10px 8px; padding: 10px 14px; border-radius: 10px; cursor: pointer; color: var(--sidebar-text); border: 1px solid var(--sidebar-divider); background: rgba(255,255,255,0.04); font-size: 0.92rem; letter-spacing: 2px; transition: background 0.2s ease, transform 0.2s ease; user-select: none; }
.roster-entry-row:hover { background: rgba(255,255,255,0.09); color: var(--sidebar-header-text); transform: translateX(2px); }
.roster-entry-row .fa-address-card { color: var(--accent-gold); }
.roster-entry-arrow { margin-left: auto; opacity: 0.6; font-size: 1rem; }

/* 同席录浮层：竖长面板（桌面居中，移动端近全屏见底部媒体查询） */
.roster-modal-panel { width: 480px; max-width: 94vw; height: min(80vh, 760px); display: flex; flex-direction: column; padding: 20px 16px 12px; }
.roster-modal-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-wood); padding-bottom: 8px; margin-bottom: 8px; flex-shrink: 0; }
.roster-modal-body { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; }
.roster-section-head { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 2px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 4px; flex-shrink: 0; user-select: none; }
/* 原侧栏深底上的白色小图标，在纸色面板内改随主题正文字色（否则日间主题下不可见） */
.roster-modal-panel .text-light { color: var(--text-muted) !important; }
/* 名录内会话行与好友分组头改用主题正文变量，保证六套主题下纸面可读 */
.roster-modal-panel .session-item { color: var(--text-main); }
.roster-modal-panel .session-item:hover { background: var(--soft-hover); color: var(--text-main); }
.roster-modal-panel .session-item.offline-member .nickname-text { color: var(--text-muted); }
.roster-modal-panel .friend-subgroup-header { color: var(--text-muted); background: rgba(0,0,0,0.045); }
.roster-modal-panel .friend-subgroup-header:hover { color: var(--text-main); background: rgba(0,0,0,0.085); }
.roster-modal-panel .friend-sig { color: var(--text-muted); }

/* 移动端：同席录铺满全屏（安卓返回键可逐层关闭） */
@media (max-width: 768px) {
    .roster-modal-panel { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: none; }
}

/* ============================================================
   功能增补：长按头像@ / 翻卷寻迹 / 正在研墨
   ============================================================ */
/* 群聊消息头像 @ 提及入口：可按暗示 + 屏蔽长按系统选择框 */
img.msg-avatar-mention { cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* 翻卷寻迹结果行：头像 + 昵称 + 时间 + 命中摘要（样式随六套主题变量自适配） */
.tr-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-wood); border-radius: 8px; background: var(--paper-bg); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.tr-item:hover { background: var(--soft-hover); border-color: var(--accent); }
.tr-item .tr-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--avatar-bg); }
.tr-item .tr-main { flex: 1; min-width: 0; }
.tr-item .tr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tr-item .tr-nick { font-weight: 600; font-size: 0.85rem; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-item .tr-time { font-size: 0.7rem; color: var(--msg-info); flex-shrink: 0; font-family: monospace; }
.tr-item .tr-snippet { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
/* 寻迹命中词金印：金底浅墨字（金/纸皆为主题变量，暗色主题同辉） */
mark.tf-hit { background: var(--accent-gold); color: var(--paper-bg); border-radius: 2px; padding: 0 1px; }

/* 正在研墨指示条：标题下方小字，浮层不拦截消息区点击 */
#typing-indicator-text { pointer-events: none; }