:root {
  color-scheme: light dark;
  --bg:#f5f5f7; --card:#fff; --line:#e6e6ea; --ink:#17171a; --muted:#8a8a92; --accent:#2563eb;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#151518; --card:#1e1e22; --line:#2c2c33; --ink:#ececf1; --muted:#9a9aa5; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin:0; display:flex; flex-direction:column; background:var(--bg); color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
.hide { display:none !important; }

/* 通用控件 */
label { display:block; font-size:12px; color:var(--muted); margin:10px 0 4px; }
input, textarea {
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  background:transparent; color:var(--ink); font:inherit;
}
textarea { resize:vertical; }
button {
  margin-top:16px; width:100%; padding:11px; border:0; border-radius:10px;
  background:var(--accent); color:#fff; font-size:15px; font-weight:600; cursor:pointer;
}
button.ghost { background:transparent; color:var(--accent); border:1px solid var(--line); margin-top:8px; }
.err { color:#dc2626; font-size:13px; min-height:18px; margin-top:8px; }

/* 头像 */
.av {
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  font-weight:600; line-height:1; user-select:none; flex:none; color:#fff;
}

/* 应用外壳：左栏（用户区 / 功能切换 / 房间列表）+ 主区 */
#shell { flex:1; display:flex; min-height:0; }
#side {
  width:260px; flex:none; display:flex; flex-direction:column; min-height:0;
  background:var(--card); border-right:1px solid var(--line);
}
body:not(.authed) #side, body:not(.authed) #mtop { display:none; }

.side-head { display:flex; align-items:center; gap:4px; padding:10px 10px 8px; }
#meBtn {
  display:flex; align-items:center; gap:10px; width:auto; margin:0; padding:4px;
  border:0; border-radius:10px; background:transparent; color:var(--ink);
  text-align:left; font-weight:600; font-size:14px; flex:1; min-width:0;
}
#meBtn:active { background:var(--bg); }
#meBtn .me { display:flex; flex-direction:column; min-width:0; }
.me-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me-handle { font-size:11px; font-weight:400; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#gearBtn, #drawerClose {
  width:auto; margin:0; padding:6px 10px; font-size:15px;
  background:transparent; color:var(--muted); border:0; border-radius:8px;
}
#drawerClose { display:none; }

#tabs { display:flex; gap:6px; padding:4px 10px 10px; border-bottom:1px solid var(--line); }
#tabs button {
  flex:1; width:auto; margin:0; padding:7px 0; font-size:13px; border-radius:9px;
  background:transparent; color:var(--muted); border:1px solid var(--line);
}
#tabs button.on { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }

#sideRoomsSec { flex:1; min-height:0; display:flex; flex-direction:column; padding:8px 10px; }
.side-sec-title { font-size:11px; color:var(--muted); margin:0 0 6px 4px; }
#sideRooms { flex:1; overflow-y:auto; min-height:0; }
.side-note { font-size:12px; color:var(--muted); padding:6px 4px; }
.side-foot { flex:none; font-size:12px; color:var(--muted); padding:8px 12px; border-top:1px solid var(--line); }
.side-foot b { color:var(--ink); }

/* 在线名单（Part 5）：人数 + 头像排 + 可展开完整名单 */
#presenceBtn {
  display:flex; align-items:center; gap:8px; width:100%; margin:0; padding:4px 2px;
  background:transparent; border:0; color:inherit; font-size:12px; font-weight:400; cursor:pointer;
}
#presenceBtn .pf-count { flex:none; }
#presenceAv { display:flex; align-items:center; min-width:0; overflow:hidden; }
#presenceAv .av { width:20px; height:20px; font-size:9px; margin-left:-6px; border:2px solid var(--card); }
#presenceAv .av:first-child { margin-left:0; }
.av-more {
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--line); color:var(--ink); font-weight:600; flex:none;
}
#presenceList { padding:6px 2px 2px; display:flex; flex-direction:column; gap:2px; max-height:180px; overflow-y:auto; }
#presenceList .prow { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); }
#presenceList .prow-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#presenceList .tag { font-size:10px; padding:1px 5px; border-radius:5px; background:rgba(37,99,235,.12); color:var(--accent); }

/* 聊天页自带的房间栏：搬进侧栏前先藏住；搬入后按侧栏竖排列表展示 */
#page > #rooms { display:none; }
#sideRooms #rooms {
  display:flex; flex-direction:column; gap:4px; padding:0;
  background:transparent; border:0; overflow:visible;
}
#sideRooms #rooms button {
  width:100%; margin:0; padding:8px 12px; border-radius:10px; text-align:left;
  font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#sideRooms #rooms button.search-btn { margin-left:0; }

/* 主区 + 移动端顶栏 */
#maincol { flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; }
#mtop { flex:none; display:flex; align-items:center; gap:10px; padding:6px 10px; background:var(--card); border-bottom:1px solid var(--line); }
#mtopBack {
  display:none; width:auto; margin:0; padding:4px 10px; font-size:16px;
  background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:9px;
}
#mtopTitle { font-size:15px; }

#scrim { display:none; }

/* 页面容器 */
#page { flex:1; display:flex; flex-direction:column; min-height:0; }

/* 登录页 */
.auth-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card { width:100%; max-width:360px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; }
.auth-card h1 { font-size:18px; margin:0 0 4px; }
.auth-card .sub { color:var(--muted); font-size:13px; margin-bottom:16px; }

/* 聊天页 */
#rooms { display:flex; gap:6px; padding:8px 10px; overflow-x:auto; background:var(--card); border-bottom:1px solid var(--line); }
#rooms button {
  width:auto; margin:0; padding:6px 12px; border-radius:999px; background:transparent;
  color:var(--muted); border:1px solid var(--line); font-weight:500; font-size:14px;
}
#rooms button.on { background:var(--accent); color:#fff; border-color:var(--accent); }

#logWrap { flex:1; position:relative; min-height:0; display:flex; }
#log { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; overscroll-behavior:contain; }
#newMsg {
  position:absolute; right:14px; bottom:14px; width:auto; margin:0; padding:7px 14px;
  font-size:13px; border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.empty-state { flex:1; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; }
.m.pending { opacity:.55; }
.m.failed .bubble { border-color:#dc2626; }
.fail-note { color:#dc2626; }
.retry { width:auto; margin:6px 0 0; padding:4px 12px; font-size:12px; border-radius:999px; color:#dc2626; }
.m { display:flex; gap:9px; align-items:flex-start; }
.m.me { flex-direction:row-reverse; }
.m .body { max-width:76%; }
.m .who { font-size:11px; color:var(--muted); margin-bottom:3px; }
.m.me .who { text-align:right; }
.m .bubble {
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px 12px;
  white-space:pre-wrap; word-break:break-word;
}
.m.me .bubble { background:var(--accent); color:#fff; border-color:var(--accent); }
.m .tag { font-size:10px; padding:1px 5px; border-radius:5px; background:rgba(37,99,235,.12); color:var(--accent); margin-left:5px; }
.sys { align-self:center; font-size:12px; color:var(--muted); }

/* 消息引用（Part 7/8） */
.quote {
  font-size:12px; color:var(--muted); background:var(--bg);
  border-left:3px solid var(--accent); border-radius:6px;
  padding:4px 8px; margin-bottom:4px; cursor:pointer;
  max-height:4.4em;           /* 约 2 行高；超出部分滚轮/拖滚动条可看全文 */
  overflow-y:auto; overscroll-behavior:contain;
  word-break:break-word;
}
.quote:hover { color:var(--ink); }
.m.me .quote { background:var(--bg); color:var(--muted); border-left-color:var(--accent); } /* 引用块在气泡外，用页面底色才看得清 */
.quote-btn {
  display:none; position:absolute; top:-10px; right:6px; width:auto; margin:0;
  padding:2px 8px; font-size:11px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); font-weight:400;
}
.m .bubble { position:relative; }
.m:hover .quote-btn { display:block; }
@media (hover:none) { .quote-btn { display:none !important; } } /* 触屏设备只走长按 */

#replyBar {
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  font-size:12px; color:var(--muted);
}
#replyBar #replyText { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
#replyBar button { width:auto; margin:0; padding:3px 10px; font-size:12px; border-radius:8px; }

/* 移动端长按操作条 + 引用定位轻提示 */
#msgActions {
  position:fixed; left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:45; display:flex; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:10px; box-shadow:0 4px 18px rgba(0,0,0,.25);
}
#msgActions button { width:auto; flex:1; margin:0; padding:10px; }
#quoteTip {
  position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:45; background:rgba(0,0,0,.75); color:#fff; font-size:12px;
  padding:6px 12px; border-radius:999px; pointer-events:none;
}

#composer {
  display:flex; flex-direction:column; gap:6px; padding:10px; background:var(--card); border-top:1px solid var(--line);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.composer-row { display:flex; align-items:flex-end; gap:8px; }
#imgBtn {
  width:auto; margin:0; flex:none; height:42px; padding:0 12px; border-radius:16px;
  background:transparent; color:var(--muted); border:1px solid var(--line); font-size:17px;
}
#text {
  flex:1; border-radius:16px; resize:none; min-height:42px; max-height:120px;
  line-height:1.45; padding:10px 13px;
}
#composer button { width:auto; margin:0; padding:0 18px; height:42px; border-radius:16px; }

/* 待发送图片条 */
#imgBar {
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  font-size:12px; color:var(--muted);
}
#imgBar #imgName { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
#imgBar button { width:auto; margin:0; padding:3px 10px; font-size:12px; border-radius:8px; }

/* 气泡内图片：不撑破气泡，点击放大 */
.msg-img {
  display:block; max-width:100%; max-height:260px; width:auto; height:auto;
  border-radius:10px; margin-top:6px; cursor:zoom-in;
}
.m.me .msg-img { margin-left:auto; }

/* 表情包消息（Part 10）：约 120px 无底色小图；纯表情消息去掉气泡底色 */
.msg-sticker {
  display:block; width:120px; max-width:100%; height:auto;
  margin-top:4px; cursor:zoom-in;
}
.m.me .msg-sticker { margin-left:auto; }
.bubble.bare { background:transparent; border-color:transparent; padding:0; }
.m.me .bubble.bare { background:transparent; border-color:transparent; color:var(--ink); }

/* 桌面悬停图片出「存表情包」（触屏只走长按操作条） */
.sticker-btn {
  display:none; position:absolute; bottom:-10px; right:6px; width:auto; margin:0;
  padding:2px 8px; font-size:11px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); font-weight:400;
}
.m:hover .sticker-btn { display:block; }
@media (hover:none) { .sticker-btn { display:none !important; } }

/* 表情面板（Part 10）：桌面弹层在输入框上方；移动端占底部约 40vh */
#emojiPanel {
  position:absolute; left:10px; right:10px; bottom:calc(100% + 6px); z-index:15;
  display:flex; flex-direction:column; max-height:40vh; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.ep-tabs { display:flex; flex:none; border-bottom:1px solid var(--line); }
.ep-tab {
  flex:1; margin:0; padding:9px 0; border-radius:0; border:0;
  background:transparent; color:var(--muted); font-size:13px;
  border-bottom:2px solid transparent;
}
.ep-tab.on { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.ep-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:8px; }
.ep-grid { display:grid; gap:2px; }
.ep-emoji { grid-template-columns:repeat(8, 1fr); }
.ep-emoji button {
  margin:0; padding:2px; font-size:22px; line-height:1.4;
  background:transparent; border:0; border-radius:8px; color:inherit;
}
.ep-stickers { grid-template-columns:repeat(4, 1fr); gap:8px; }
.ep-stickers img {
  width:100%; max-height:96px; object-fit:contain;
  background:var(--bg); border-radius:8px; cursor:pointer;
}
.ep-empty {
  grid-column:1 / -1; text-align:center;
  font-size:12px; color:var(--muted); padding:22px 8px;
}

/* 图片 lightbox */
#lightbox {
  position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#lightbox img { max-width:100%; max-height:100%; border-radius:8px; }
#lightbox #lbClose {
  position:absolute; top:14px; right:14px; width:auto; margin:0; padding:6px 12px;
  background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:10px; font-size:16px;
}

/* @ 成员弹层：锚在输入框上方 */
#composer { position:relative; }
#mention {
  position:absolute; left:10px; right:10px; bottom:calc(100% + 6px);
  max-height:220px; overflow-y:auto; z-index:15;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,.18); padding:4px;
}
#mention .mi {
  display:flex; align-items:center; gap:8px; width:100%; margin:0; padding:7px 10px;
  border-radius:8px; background:transparent; color:var(--ink); font-size:14px; font-weight:400;
  text-align:left; border:0;
}
#mention .mi.on { background:var(--bg); }
#mention .mi-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mention .mi .tag { margin-left:0; }

/* 气泡里 @成员名 的轻量高亮 */
.bubble .mention { color:var(--accent); font-weight:600; }
.m.me .bubble .mention { color:#fff; text-decoration:underline; }

/* 设置页 */
.settings-wrap { flex:1; overflow-y:auto; padding:16px; }
.settings { max-width:420px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; }
.prof { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.prof .h { font-weight:600; }
.prof .sub2 { font-size:12px; color:var(--muted); }
.section-title { font-size:13px; font-weight:600; color:var(--muted); margin:22px 0 2px; }
.hr { height:1px; background:var(--line); margin:18px 0 4px; }
.note { font-size:12px; color:var(--muted); margin-top:10px; }

/* 按天分组 / 时间 */
.day-sep {
  align-self:center; font-size:12px; color:var(--muted);
  padding:4px 10px; background:var(--bg); border-radius:999px; margin:2px 0;
}
.msg-time { font-size:10px; color:var(--muted); margin-left:6px; }
/* 自己的时间也在气泡外浅色背景上，跟随 muted 即可（.m.me .who 已右对齐） */
.older-wrap { align-self:center; margin:2px 0 6px; }
button.older { width:auto; margin:0; padding:5px 14px; font-size:12px; border-radius:999px; }
button.older:disabled { opacity:.5; }
.hit { animation: hit 1.8s ease-out; }
@keyframes hit { 0% { background:rgba(37,99,235,.18); } 100% { background:transparent; } }

/* 输入栏工具栏（Part 9）：表情 → 图片 → 语音 → 搜索 */
#toolbar { display:flex; gap:6px; }
#toolbar button {
  width:auto; margin:0; flex:none; height:34px; padding:0 12px; border-radius:10px;
  background:transparent; color:var(--muted); border:1px solid var(--line); font-size:15px;
}

/* 搜索页（Part 9，独立路由 #/search，仍在聊天上下文） */
.search-page { flex:1; display:flex; flex-direction:column; min-height:0; }
.sp-top {
  display:flex; align-items:center; gap:8px; padding:10px;
  background:var(--card); border-bottom:1px solid var(--line);
}
.sp-top #spBack { width:auto; margin:0; padding:6px 12px; flex:none; }
.sp-top #spQ { flex:1; min-width:0; }
.sp-filters {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 10px;
  background:var(--card); border-bottom:1px solid var(--line);
}
.sp-filters select, .sp-filters input { width:auto; flex:1; min-width:96px; padding:8px 10px; }
.sp-filters .sp-dash { flex:none; color:var(--muted); }
.sp-list { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.sp-row {
  display:flex; gap:9px; align-items:flex-start; padding:8px 10px;
  border:1px solid var(--line); border-radius:10px; cursor:pointer;
}
.sp-row:active { background:var(--bg); }
.sp-row .who { font-size:11px; color:var(--muted); margin-bottom:2px; }
.sp-main { flex:1; min-width:0; }
.sp-text { font-size:14px; word-break:break-word; }
.sp-thumb {
  display:block; max-width:120px; max-height:80px; border-radius:8px;
  margin-top:6px; cursor:zoom-in;
}
.sp-more-wrap { flex:none; padding:0 12px 12px; text-align:center; }
.sp-more-wrap button { width:auto; margin:0; padding:6px 16px; }
select { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--ink); font:inherit; }

/* 错误浮层（手机上没 console，靠它报错） */
#errToast {
  position:fixed; left:12px; right:12px; bottom:calc(72px + env(safe-area-inset-bottom));
  background:#b91c1c; color:#fff; font-size:13px; padding:10px 12px; border-radius:10px;
  opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s; pointer-events:none; z-index:30;
}
#errToast.show { opacity:1; transform:translateY(0); }

/* 备案号 */
#beian { flex:none; text-align:center; font-size:11px; color:var(--muted); padding:4px 8px calc(4px + env(safe-area-inset-bottom)); background:var(--bg); }
#beian a { color:inherit; text-decoration:none; }

/* 占位页（小游戏 / 发帖） */
.ph-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:20px; }
.ph-card { width:100%; max-width:360px; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px 20px; }
.ph-ico { font-size:40px; }
.ph-card h2 { font-size:17px; margin:10px 0 4px; }
.ph-sub { font-size:13px; color:var(--muted); margin:0 0 6px; }
.ph-slot { min-height:20px; }

/* 资料页小件 */
.ok { color:#16a34a; font-size:13px; min-height:18px; margin-top:8px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#22c55e; margin-right:4px; }
.dot.off { background:var(--muted); }

/* 设置页：通知开关行 */
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0 2px; }
.sw-label { font-size:14px; }
.sw-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.switch {
  width:auto; margin:0; flex:none; width:44px; height:26px; padding:2px; border-radius:999px;
  background:var(--line); border:1px solid var(--line); position:relative; transition:background .15s;
}
.switch .knob {
  display:block; width:20px; height:20px; border-radius:50%; background:#fff;
  transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch.on { background:var(--accent); border-color:var(--accent); }
.switch.on .knob { transform:translateX(18px); }

/* 资料页头像操作 */
.avatar-btns { display:flex; gap:8px; flex-wrap:wrap; }
.avatar-btns button { flex:1; min-width:140px; width:auto; margin:0; }

/* 危险操作按钮（退出登录等） */
button.ghost.danger { color:#dc2626; }

/* 通用 loading / disabled 态 */
button:disabled { opacity:.55; cursor:default; }

/* 占位页功能入口 */
.ph-cta { margin-top:6px; }
.ph-cta[aria-disabled="true"] { opacity:.55; cursor:default; }
.ph-tip { font-size:13px; color:var(--accent); margin-top:8px; min-height:18px; }

/* 移动端（<900px）：单栏，左栏变抽屉，顶栏带 返回/☰ */
@media (max-width:899px) {
  #shell { display:block; position:relative; }
  #maincol { height:100%; }
  #side {
    position:fixed; top:0; bottom:0; left:0; width:min(80vw,300px); z-index:40;
    transform:translateX(-100%); transition:transform .2s ease;
  }
  body.drawer-open #side { transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.25); }
  body.drawer-open #scrim { display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:30; }
  #drawerClose { display:inline-block; }
  #mtopBack { display:inline-block; }
}

/* 侧栏页内导航（Part 8） */
.side-nav { display:flex; flex-direction:column; gap:4px; padding:8px 10px; }
.side-nav-item { width:100%; text-align:left; padding:9px 10px; font-size:13px; border-radius:9px; border:1px solid transparent; background:transparent; color:var(--ink); }
.side-nav-item:hover { background:var(--bg); }
.side-nav-item.on { background:var(--card); border-color:var(--line); font-weight:600; }

/* 表情包管理页（Part 11） */
.sm-wrap { flex:1; overflow-y:auto; padding:14px; }
.sm-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.sm-note { font-size:12px; color:var(--muted); }
.sm-top button { width:auto; margin:0; flex:none; padding:8px 14px; border-radius:10px; }
.sm-status { font-size:13px; color:#16a34a; min-height:18px; margin-bottom:6px; }
.sm-status.err { color:#dc2626; }
.sm-savebar {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; font-size:13px; margin-bottom:10px;
}
.sm-savebar button { width:auto; margin:0; padding:6px 14px; }
.sm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; }
.sm-item {
  display:flex; flex-direction:column; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px;
}
.sm-item img {
  width:100%; height:96px; object-fit:contain;
  background:var(--bg); border-radius:8px;
}
.sm-ops { display:flex; gap:4px; }
.sm-ops button { flex:1; width:auto; margin:0; padding:4px 0; font-size:12px; border-radius:8px; }
.sm-ops .sm-del { flex:1.4; }
.sm-ops .danger { color:#dc2626; border-color:#dc2626; }
.sm-empty { grid-column:1 / -1; text-align:center; font-size:13px; color:var(--muted); padding:30px 10px; line-height:2; }
@media (max-width:420px) { .sm-grid { grid-template-columns:repeat(3, 1fr); } }

/* 语音（Part 12） */
#voiceBar { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--bg); border:1px solid var(--line); border-radius:10px; font-size:12px; color:var(--muted); }
#voiceBar #voiceTime { font-weight:600; color:var(--ink); }
#voiceBar #voiceHint { flex:1; }
#voiceBar button { width:auto; margin:0; padding:3px 10px; font-size:12px; border-radius:8px; }
.audio-player { display:flex; align-items:center; gap:8px; margin-top:2px; max-width:100%; }
.ap-btn { width:32px; height:32px; margin:0; flex:none; padding:0; border-radius:50%; font-size:13px; }
.m.me .ap-btn { background:rgba(255,255,255,.2); color:#fff; border-color:rgba(255,255,255,.4); }
.ap-bar { flex:1; min-width:60px; height:4px; border-radius:2px; background:var(--line); overflow:hidden; }
.ap-fill { height:100%; width:0; background:var(--accent); }
.m.me .ap-fill { background:#fff; }
.ap-time { font-size:11px; color:var(--muted); flex:none; }
.m.me .ap-time { color:rgba(255,255,255,.85); }