/* 内置开源字体（OFL，随包分发，保证各设备排版一致） */
/* 只保留本身笔画细的 LongCang 手写体。行书/圆体改用系统细字体：
   内置的 ZhiMangXing/ZCOOLKuaiLe 是 4MB/1.5MB 的网络字体，加载完成的一瞬间
   会从系统细字替换成笔画更重的字形，看起来就像"切换后立马变粗"（2026-11-11 用户反馈）。 */
@font-face { font-family: "LongCang"; src: url("/fonts/LongCang-Regular.ttf") format("truetype"); font-display: swap; }
/* 站酷小薇（OFL，细宋）：随包内置，用户明确要的“细字体” */
@font-face { font-family: "ZCOOLXiaoWei"; src: url("/fonts/ZCOOLXiaoWei-Regular.ttf") format("truetype"); font-display: swap; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font: 15px/1.5 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #eef1f6; color: #1e2733; overflow: hidden;
}
.hidden { display: none !important; }

/* 登录 */
.auth { height: 100%; display: flex; align-items: center; justify-content: center; }
.auth-box { width: 320px; max-width: 92vw; background: #fff; border-radius: 14px; padding: 22px 20px; box-shadow: 0 10px 34px rgba(28,55,90,.14); }
.brand { font-size: 24px; font-weight: 700; color: #1b6ef5; text-align: center; margin-bottom: 14px; letter-spacing: 2px; }
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab { flex: 1; padding: 8px 0; border: 0; background: #f0f2f5; color: #66717f; border-radius: 8px; font-size: 15px; }
.tab.on { background: #1b6ef5; color: #fff; }
.field { margin-bottom: 10px; }
input, textarea, select {
  width: 100%; padding: 10px 11px; border: 1px solid #d6dbe3; border-radius: 8px;
  font: inherit; background: #fff; color: #1e2733; outline: none;
}
input:focus, textarea:focus { border-color: #1b6ef5; }
.cap-row { display: flex; gap: 8px; align-items: center; }
.cap-row input { flex: 1; }
.cap-img { width: 96px; height: 38px; border-radius: 6px; background: #f2f4f7; cursor: pointer; }
.btn-primary { width: 100%; padding: 11px; border: 0; border-radius: 8px; background: #1b6ef5; color: #fff; font-size: 16px; cursor: pointer; }
.btn-primary:disabled { background: #9dc0fb; }
.btn-primary.small { width: auto; padding: 9px 18px; }
.msg { min-height: 20px; margin-top: 10px; font-size: 13px; color: #d33; text-align: center; }

/* 主框架 */
.main { display: flex; height: 100%; }
.side { width: 268px; min-width: 268px; background: #fff; border-right: 1px solid #e3e7ee; display: flex; flex-direction: column; }
.me { display: flex; align-items: center; gap: 9px; padding: 12px; border-bottom: 1px solid #eef1f5; }
.avatar { width: 38px; height: 38px; border-radius: 8px; background: #1b6ef5; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.me-info { flex: 1; min-width: 0; }
.me-info b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-info span { font-size: 12px; color: #8b95a3; }
.link-btn { border: 0; background: none; color: #1b6ef5; font-size: 13px; cursor: pointer; padding: 4px 6px; }
.side-tools { display: flex; gap: 6px; padding: 9px 10px; border-bottom: 1px solid #eef1f5; }
.side-tools input { flex: 1; padding: 7px 9px; }
.mini { border: 1px solid #cfd6e0; background: #f7f9fc; color: #3b4757; border-radius: 7px; padding: 7px 11px; font-size: 13px; cursor: pointer; }
.mini.on { background: #1b6ef5; color: #fff; border-color: #1b6ef5; }
.conv-list { flex: 1; overflow: auto; }
.conv { display: flex; gap: 9px; padding: 10px 11px; border-bottom: 1px solid #f3f5f8; cursor: pointer; }
.conv:hover, .conv.on { background: #eff4ff; }
.conv .avatar { width: 40px; height: 40px; }
.conv .avatar.grp { background: #12b76a; }
.conv-mid { flex: 1; min-width: 0; }
.conv-mid .t { display: flex; align-items: center; gap: 6px; }
.conv-mid .t b { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .kind { flex: none; font-size: 10px; line-height: 1; color: #5b6b82; background: #eaeef5; border-radius: 4px; padding: 3px 4px; }
.conv .kind.g { color: #0e8a52; background: #e3f6ec; }
.conv-mid .t i { font-size: 11px; color: #9aa4b2; font-style: normal; flex: none; }
.conv-mid p { margin: 2px 0 0; font-size: 12px; color: #7c8795; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { flex: none; align-self: center; min-width: 18px; height: 18px; border-radius: 9px; background: #f04438; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.side-foot { padding: 7px 11px; border-top: 1px solid #eef1f5; font-size: 12px; color: #8b95a3; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.dot.on { background: #12b76a; }
.dot.off { background: #f79009; }

/* 聊天区 */
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; background: #fff; border-bottom: 1px solid #e3e7ee; }
.chat-title b { font-size: 16px; }
.chat-title .gid { display: inline-block; font-style: normal; font-size: 12px; font-weight: 600; color: #1b6ef5; background: #eef5ff; border: 1px solid #d7e6ff; border-radius: 6px; padding: 1px 7px; margin-left: 8px; cursor: pointer; vertical-align: 2px; }
.chat-title .gid:hover { background: #e0edff; }
.chat-title span { display: block; font-size: 12px; color: #8b95a3; }
.chat-acts { display: flex; gap: 2px; flex: none; }
.notice-bar { background: #fff8e6; border-bottom: 1px solid #f4e2b0; color: #7a5b12; font-size: 12px; padding: 7px 14px; max-height: 62px; overflow: auto; }
.msgs { flex: 1; overflow: auto; padding: 14px; }
.day { text-align: center; font-size: 12px; color: #98a2b0; margin: 10px 0; }
.row-sys { text-align: center; font-size: 12px; color: #8b95a3; margin: 8px 0; }
.row-sys span { background: rgba(0, 0, 0, .05); padding: 3px 10px; border-radius: 10px; }
.m { display: flex; gap: 8px; margin: 10px 0; }
.m .avatar { width: 34px; height: 34px; font-size: 13px; border-radius: 7px; }
.m .body { max-width: 68%; }
.m .who { font-size: 11px; color: #98a2b0; margin-bottom: 3px; }
.bubble { position: relative; padding: 8px 11px; border-radius: 9px; background: #fff; word-break: break-word; white-space: pre-wrap; box-shadow: 0 1px 2px rgba(20, 40, 70, .07); font-weight: 400; }
.m.me { flex-direction: row-reverse; }
.m.me .body { display: flex; flex-direction: column; align-items: flex-end; }
.m.me .bubble { background: #1b6ef5; color: #fff; }
.m .bubble.file { background: #f2f7ff; border: 1px solid #d7e6ff; color: #1e2733; min-width: 190px; }
.m.me .bubble.file { background: #eaf3ff; }
.f-name { font-size: 14px; word-break: break-all; }
.f-size { font-size: 12px; color: #7c8795; margin-top: 3px; }
.f-acts { margin-top: 6px; display: flex; gap: 6px; }
.f-acts a { color: #1b6ef5; font-size: 12px; text-decoration: none; }
.f-acts button { border: 0; background: none; color: #d33; font-size: 12px; cursor: pointer; padding: 0; }
.st { font-size: 11px; color: #98a2b0; margin-top: 3px; }
.st.sending { color: #b7690d; }
.st.failed { color: #d33; cursor: pointer; }
.recalled { font-size: 12px; color: #98a2b0; background: rgba(0, 0, 0, .04); border-radius: 9px; padding: 6px 10px; }
.acts { margin-top: 4px; display: flex; gap: 8px; }
.acts button { border: 0; background: none; color: #1b6ef5; font-size: 12px; cursor: pointer; padding: 0; }
.load-more { text-align: center; margin-bottom: 8px; }
.composer { position: relative; background: #fff; border-top: 1px solid #e3e7ee; padding: 8px 12px 12px; }
.reply-hint { font-size: 12px; color: #7c8795; background: #f4f6fa; border-radius: 6px; padding: 5px 8px; margin-bottom: 6px; }
.compose-row { display: flex; gap: 8px; align-items: flex-end; }
.pending { display: flex; gap: 8px; align-items: center; padding: 6px 8px; margin-bottom: 6px; background: #f7f9fc; border: 1px solid #e3e7ee; border-radius: 10px; }
.pending .thumb { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; border: 1px solid #dfe4ec; background: #fff; flex: none; }
.pending .chip { display: flex; gap: 6px; align-items: center; min-width: 0; }
.pending .chip .fn { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.pending .chip .fs { font-size: 11px; color: #8b95a3; }
.pending .tip { font-size: 11px; color: #8b95a3; margin-left: auto; }
.pending .rm { border: 0; background: #eef1f5; color: #47536a; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; flex: none; }
.pending .rm:hover { background: #ffe3e3; color: #d0334a; }
.composer.dropping { background: #eef5ff; outline: 2px dashed #1b6ef5; outline-offset: -4px; }
.compose-row textarea { flex: 1; min-height: 96px; max-height: 300px; resize: vertical; line-height: 1.5; }
.compose-row .btn-primary { height: 40px; }

/* 群面板 */
.info { width: 258px; min-width: 258px; background: #fff; border-left: 1px solid #e3e7ee; overflow: auto; padding: 12px; }
.info h4 { margin: 0 0 10px; font-size: 15px; }
.info .sec { margin-bottom: 14px; }
.info .sec > b { display: block; font-size: 13px; color: #5b6675; margin-bottom: 6px; }
.mem { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 13px; }
.mem .r { font-size: 11px; color: #12b76a; }
.mem button { margin-left: auto; border: 0; background: none; color: #d33; font-size: 12px; cursor: pointer; }
.file-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid #f3f5f8; font-size: 13px; }
.file-row .n { word-break: break-all; }
.file-row .x { font-size: 11px; color: #8b95a3; }
.file-row .a { display: flex; gap: 8px; }
.file-row .a a { color: #1b6ef5; font-size: 12px; text-decoration: none; }
.file-row .a button { border: 0; background: none; color: #d33; font-size: 12px; cursor: pointer; padding: 0; }
textarea.notice-edit { width: 100%; min-height: 210px; resize: vertical; line-height: 1.6; }

/* 弹窗与提示 */
.mask { position: fixed; inset: 0; background: rgba(18, 30, 48, .38); display: flex; align-items: center; justify-content: center; z-index: 20; }
.modal { width: 330px; max-width: 92vw; max-height: 82vh; overflow: auto; background: #fff; border-radius: 12px; padding: 16px; }
.modal.wide { width: 640px; }
.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.modal-body { margin-bottom: 12px; }
.modal-body .field { margin-bottom: 8px; }
.pick { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; }
.pick input { width: 17px; height: 17px; flex: none; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; background: rgba(30, 39, 51, .92); color: #fff; padding: 9px 16px; border-radius: 20px; font-size: 13px; z-index: 40; max-width: 86vw; }

/* 群优先新增 */
.staff-strip { background: #fff4e5; border-bottom: 1px solid #f6dcb0; color: #8a5310; font-size: 12px; padding: 7px 11px; cursor: pointer; }
.staff-strip.gray { background: #eef4ff; border-bottom: 1px solid #d7e6ff; color: #1b4f9c; }
.empty { text-align: center; color: #98a2b0; font-size: 13px; padding: 26px 14px; }
.badge.at { background: #d92d20; font-weight: 700; }
.avatar.sm { width: 26px; height: 26px; font-size: 12px; border-radius: 6px; }
.m.at-me .bubble { box-shadow: -3px 0 0 #d92d20, 0 1px 2px rgba(20,40,70,.07); }
.at-chip { display: inline-block; align-self: flex-start; margin-top: 3px; background: #d92d20; color: #fff; font-size: 11px; border-radius: 9px; padding: 1px 7px; }
.at-hint { font-size: 12px; color: #1b4f9c; background: #eef4ff; border-radius: 6px; padding: 5px 8px; margin-bottom: 6px; cursor: pointer; }
.at-pop { position: absolute; left: 12px; right: 12px; bottom: 100%; margin-bottom: 6px; max-height: 320px; overflow: auto; background: #fff; border: 1px solid #e3e7ee; border-radius: 12px; box-shadow: 0 10px 30px rgba(20,40,70,.18); padding: 8px; z-index: 15; }
.at-pop input[type=search] { margin-bottom: 6px; }
.at-all { font-size: 14px; color: #1f2a37; display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.at-all:hover { background: #f2f6ff; }
.at-ico { width: 26px; height: 26px; border-radius: 6px; background: #1b6ef5; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex: none; }
.at-state { margin-left: auto; font-size: 12px; color: #1b6ef5; }
.at-list-row { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.at-list-row:hover { background: #f2f6ff; }
.at-list-row .nm { font-size: 14px; }
.at-list-row .role { font-size: 11px; color: #8b95a3; margin-left: 6px; }
.pick-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.pick-row:hover { background: #f2f6ff; }
.pick-row .mid { flex: 1; min-width: 0; }
.pick-row .nm { font-size: 14px; }
.pick-row .x, .file-row .x, .req-row .x { font-size: 11px; color: #8b95a3; }
.req-row { padding: 7px 0; border-bottom: 1px solid #f3f5f8; }
.req-row .nm { font-size: 14px; }
.req-row .a { display: flex; gap: 8px; margin-top: 5px; }
.switch-row { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 0; }
.switch-row input { width: 16px; height: 16px; }
.inline { display: flex; gap: 6px; margin-top: 6px; }
.inline input { flex: 1; }

/* QQ式三栏与右键菜单 */
.panel { width: 268px; min-width: 268px; background: #fff; border-left: 1px solid #e3e7ee; display: flex; flex-direction: column; overflow: hidden; }
.panel-sec { display: flex; flex-direction: column; min-height: 0; }
.notice-sec { border-bottom: 1px solid #eef1f5; flex: none; max-height: 34%; overflow: auto; }
.member-sec { flex: 1; min-height: 0; }
.panel-hd { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 11px; border-bottom: 1px solid #f3f5f8; }
.panel-hd b { font-size: 13px; color: #5b6675; }
.link-btn.tiny { font-size: 12px; }
.panel-notice { padding: 9px 11px; }
.notice-body .notice-text { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.mini-search { width: 92px; padding: 4px 7px; font-size: 12px; border-radius: 6px; }
.member-list { flex: 1; overflow: auto; padding: 0 6px 8px; }
.mb { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.mb:hover { background: #f2f6ff; }
.mb .nm { flex: 1; min-width: 0; }
.mb .nm .n { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb .nm .t { font-size: 11px; color: #12b76a; }
.avatar.sm { background: #64748b; }
.avatar.sm.admin { background: #1b6ef5; }
.role-tag { margin-left: 5px; font-size: 10px; color: #12b76a; }
.ctx-menu { position: fixed; z-index: 60; min-width: 156px; background: #fff; border: 1px solid #e3e7ee; border-radius: 9px; box-shadow: 0 10px 28px rgba(20,40,70,.18); padding: 5px 0; }
.ctx-item { padding: 7px 14px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ctx-item:hover { background: #eff4ff; color: #1b6ef5; }
.ctx-item.danger { color: #d33; }
.ctx-item.off { color: #b6bdc7; cursor: not-allowed; }
.ctx-sep { height: 1px; background: #eef1f5; margin: 4px 0; }
.select-bar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #fff8e6; border-bottom: 1px solid #f4e2b0; font-size: 13px; color: #7a5b12; }
.select-bar #select-count { flex: 1; }
.mini.danger { color: #d33; border-color: #f2c7c7; }
.mb.picked, .m.picked { outline: 2px solid #1b6ef5; }
.m.selectable { cursor: copy; }
.tool-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.tool { border: 1px solid #cfd6e0; background: #f7f9fc; color: #3b4757; border-radius: 7px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.tool:disabled { color: #b6bdc7; cursor: not-allowed; }
.tool-tip { font-size: 11px; color: #98a2b0; margin-left: auto; text-align: right; }
.emo-pop { position: absolute; left: 12px; right: 12px; bottom: 100%; margin-bottom: 6px; max-height: 340px; overflow: auto; background: #fff; border: 1px solid #e3e7ee; border-radius: 12px; box-shadow: 0 10px 30px rgba(20,40,70,.18); padding: 10px; z-index: 16; }
/* 「＋」发送面板：手机没有粘贴也没有拖拽，图片/文件必须给一个真入口（2026-11-11 用户要求） */
.plus-pop { position: absolute; left: 12px; right: 12px; bottom: 100%; margin-bottom: 6px; max-height: 62vh; overflow: auto; background: #fff; border: 1px solid #e3e7ee; border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 40, 70, .18); padding: 10px; z-index: 17; }
.plus-acts { display: flex; gap: 8px; }
.plus-act { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border: 1px solid #e3e8f0; border-radius: 9px; background: #f7f9fc; cursor: pointer; }
.plus-act b { font-size: 14px; color: #2b6fd6; font-weight: 700; }
.plus-act span { font-size: 12px; color: #46536b; }
.plus-hd { display: flex; align-items: center; gap: 8px; margin: 11px 0 7px; font-size: 12px; color: #5b6675; }
.plus-hd b { flex: none; font-size: 13px; }
.plus-sub { color: #98a2b0; font-size: 11px; }
.plus-hd .link-btn { margin-left: auto; }
.plus-recent { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.plus-recent img { width: 100%; height: 58px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 1px solid #e3e8f0; background: #eef1f5; }
.plus-note { font-size: 12px; color: #8a5310; margin-top: 7px; line-height: 1.4; }
body.mob .plus-pop { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; max-height: 74vh; border: 0; border-radius: 14px 14px 0 0; background: #1b2128; box-shadow: 0 -8px 24px rgba(0, 0, 0, .5); }
body.mob .plus-act { background: #17222e; border-color: #262f3a; }
body.mob .plus-act b { color: #7fb0ff; }
body.mob .plus-act span { color: #cfd6df; }
body.mob .plus-hd { color: #a9b3c1; }
body.mob .plus-recent img { border-color: #262f3a; background: #12161b; }
body.mob .plus-note { color: #d9b36b; }
.emo-h { font-size: 12px; color: #8b95a3; margin-bottom: 4px; }
.emo-sec { margin-bottom: 6px; }
.emo-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.emo-cell { font-size: 22px; line-height: 1; text-align: center; padding: 6px 0; border-radius: 8px; cursor: pointer; border: 0; background: none; }
.emo-cell:hover { background: #f2f6ff; }
.emo-empty { font-size: 12px; color: #8b95a3; padding: 10px 2px; }
.emo-tabs { display: flex; align-items: center; gap: 6px; border-top: 1px solid #eef1f5; padding-top: 8px; margin-top: 4px; }
.emo-tab { width: 36px; height: 30px; border: 0; background: #f2f6ff; border-radius: 8px; cursor: pointer; font-size: 15px; color: #5b6b82; }
.emo-tab.on { background: #1b6ef5; color: #fff; }
.emo-hint { font-size: 11px; color: #98a2b0; margin-left: auto; }
.bubble .emo { cursor: pointer; border-radius: 4px; padding: 0 1px; }
.bubble .emo:hover { background: #e8f0ff; box-shadow: 0 0 0 1px #cfe0ff; }
.m.me .bubble .emo:hover { background: rgba(255,255,255,.26); box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.msg-img { max-width: 190px; max-height: 190px; display: block; border-radius: 7px; cursor: zoom-in; background: #eef1f5; border: 1px solid rgba(20, 40, 70, .12); }
/* 手机聊天页右上角 ☰ 上的待审批红角标（QQ 也是这个位置给提醒） */
.badge {
  position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: #e0413a; color: #fff; font-size: 10px; line-height: 15px;
  text-align: center; font-style: normal; font-weight: 700;
}
#btn-mobinfo { position: relative; }
.msg-img.dead { opacity: .4; }
.img-err { font-size: 12px; color: #c0392b; margin-top: 4px; line-height: 1.35; }
.bubble.img-bubble .img-err { color: inherit; }
.img-bubble { padding: 5px !important; }
.img-cap { font-size: 14px; line-height: 1.45; color: #33415a; margin: 6px 3px 1px; white-space: pre-wrap; word-break: break-word; }
.img-name { font-size: 12px; color: #7c8795; margin: 5px 3px 0; word-break: break-all; }
.m.me .img-cap { color: #fff; }
.m.me .img-name { color: rgba(255, 255, 255, .82); }
.bubble.poke { background: #f2f6ff; color: #1b4f9c; font-size: 13px; }
.lightbox { position: fixed; inset: 0; background: rgba(10,16,26,.86); z-index: 70; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }
.notice-row { padding: 8px 0; border-bottom: 1px solid #f3f5f8; }
.notice-pub { display: flex; flex-direction: column; gap: 8px; }
.notice-pub-foot { display: flex; align-items: center; gap: 10px; }
.notice-pub-foot .switch-row { margin-right: auto; }
.notice-hist-h { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid #eef1f5; }
.notice-hist-h b { font-size: 14px; }
.notice-row .notice-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #7c8795; }
.notice-row .notice-text { font-size: 14px; white-space: pre-wrap; word-break: break-word; margin-top: 3px; }
.pin-tag { margin-left: 6px; background: #ff8b2c; color: #fff; font-size: 10px; border-radius: 4px; padding: 1px 5px; }
.file-nav { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.file-win-list { max-height: 46vh; overflow: auto; }
.quota { margin-top: 8px; }
.quota .bar { height: 6px; background: #eef1f5; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.quota .fill { height: 100%; background: #1b6ef5; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 5px 0; }
.set-row select { width: 168px; padding: 6px 8px; }
.pf-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.pf-head .avatar { width: 46px; height: 46px; font-size: 18px; }
.pf-info b { font-size: 16px; display: block; }
.copy-fallback { position: fixed; left: -9999px; top: 0; }
.forgot-row { text-align: center; margin-top: 8px; }
.forgot-row .link-btn { font-size: 12px; }
.set-row input[type="number"] { width: 132px; padding: 5px 8px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#modal-body .h { font-size: 12px; color: #6b7683; font-weight: 700; margin: 12px 0 2px; }

/* 头像图片化 + 裁剪弹窗 + 端游动态表情 */
/* 必须压过 .conv .avatar.grp / .avatar.sm 这些简写 background 的优先级，否则 cover 会被打回 auto，
   256px 的图只露左上角一块，看着就是"纯色方块"（2026-11-11 远程实测） */
.avatar.has-img { background-size: cover !important; background-position: center !important; background-repeat: no-repeat; color: transparent !important; }
#me-avatar { cursor: pointer; }
.emo-tab.wide { width: auto; padding: 0 10px; font-size: 12px; }
.emo-grid.game { grid-template-columns: repeat(6, 1fr); }
.emo-cell.img { padding: 3px 0; }
.emo-cell.img img { width: 46px; height: 46px; object-fit: contain; display: block; margin: 0 auto; image-rendering: pixelated; }
.m .bubble.emo-bubble, .m.me .bubble.emo-bubble { background: none; box-shadow: none; padding: 2px; }
.game-emo { width: auto; height: auto; max-width: 240px; max-height: 240px; display: block; image-rendering: pixelated; }
.emo-desc { font-size: 12px; color: #8b95a3; margin-top: 2px; }
.m.me .emo-desc { color: #5b6b82; }
.crop-wrap { width: 360px; max-width: 100%; margin: 0 auto; }
.crop-wrap canvas { display: block; width: 100%; touch-action: none; border-radius: 10px; background: #20242c; cursor: move; }
.crop-tip { font-size: 12px; color: #8b95a3; margin-top: 8px; }
.crop-bar { display: flex; gap: 8px; margin-top: 10px; }

/* 历史记录窗口 */
.icon-btn { border: 0; background: none; color: #5b6b82; cursor: pointer; padding: 2px 4px; display: inline-flex; align-items: center; vertical-align: middle; }
.icon-btn:hover { color: #1b6ef5; }
.hs-bar { margin-bottom: 8px; }
.hs-bar input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #dbe2ec; border-radius: 8px; font-size: 14px; }
.hs-tabs { display: flex; gap: 14px; border-bottom: 1px solid #eef1f5; padding-bottom: 6px; }
.hs-tab { border: 0; background: none; font-size: 13px; color: #7c8795; cursor: pointer; padding: 2px 0; border-bottom: 2px solid transparent; }
.hs-tab.on { color: #1b6ef5; border-bottom-color: #1b6ef5; font-weight: 700; }
.hs-meta { font-size: 12px; color: #8b95a3; margin: 8px 0 2px; min-height: 16px; }
.hs-list { max-height: 52vh; overflow: auto; }
.hs-day { font-size: 12px; color: #8b95a3; text-align: center; margin: 10px 0 6px; }
.hs-row { display: flex; gap: 8px; padding: 6px 4px; border-radius: 8px; cursor: pointer; align-items: flex-start; }
.hs-row:hover { background: #f2f6ff; }
.hs-mid { flex: 1; min-width: 0; }
.hs-head { display: flex; gap: 6px; align-items: baseline; }
.hs-head b { font-size: 13px; color: #33415a; font-weight: 600; }
.hs-head .t { font-size: 11px; color: #98a2b0; }
.hs-text { font-size: 13px; color: #5b6b82; word-break: break-word; }
.hs-img { max-width: 96px; max-height: 96px; border-radius: 6px; display: block; margin: 2px 6px 2px 0; vertical-align: middle; }
.hs-emo { width: 56px; height: 56px; object-fit: contain; display: inline-block; vertical-align: middle; margin: 2px 6px 2px 0; image-rendering: pixelated; }
.hs-cap { font-size: 12px; color: #8b95a3; }
.hs-empty { font-size: 13px; color: #8b95a3; text-align: center; padding: 22px 6px; }
.m.flash { animation: hsflash 1.8s ease-out 1; border-radius: 10px; }
@keyframes hsflash { 0% { background: #fff2b8; } 60% { background: #fff8d8; } 100% { background: transparent; } }

@media (max-width: 1100px) {
  /* 中等宽度（平板、端游横屏内嵌窗）：右侧面板不再占死宽度，改成浮层，聊天区不被挤 */
  .panel { position: absolute; right: 0; top: 0; height: 100%; z-index: 9; box-shadow: -6px 0 20px rgba(20, 40, 70, .12); }
}

@media (max-width: 780px) {
  .side { width: 100%; min-width: 0; position: absolute; z-index: 8; height: 100%; }
  .main.chatting .side { display: none; }
  .chat { min-width: 0; }
  .panel { position: absolute; right: 0; top: 0; height: 100%; z-index: 9; box-shadow: -6px 0 20px rgba(20, 40, 70, .12); }
  .m .body { max-width: 78%; }
  .tool-tip { display: none; }
  .emo-grid { grid-template-columns: repeat(8, 1fr); }
  .emo-grid.game { grid-template-columns: repeat(4, 1fr); }
  .msg-img { max-width: 150px; max-height: 150px; }
}

/* =====================================================================
   手机竖屏模式（body.mob）—— 仿 QQ：整屏一页一页推进 + 深色
   触发：宽度 <=780 自动，或网址带 ?mobile=1 强制（app.js 里判定）。
   所有规则都锁在 body.mob 里，桌面端一条都不受影响；配色先不做气泡皮肤。
   ===================================================================== */
.mob-only { display: none; }
.mob-info { display: none; }

body.mob { background: #0f1317; color: #e9edf2; }
body.mob .main { display: block; position: relative; }

/* ---- 页1：会话列表（整屏单列）---- */
body.mob .side {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; min-width: 0;
  background: #12161b; border-right: 0; z-index: 2;
}
body.mob .main.chatting .side, body.mob .main.show-info .side { display: none; }
body.mob .me { background: #12161b; border-bottom: 1px solid #202730; padding: 10px 12px; }
body.mob .me .avatar { width: 44px; height: 44px; border-radius: 8px; }
body.mob .me-info b { font-size: 16px; color: #e9edf2; }
body.mob .me-info span { color: #8b95a3; }
body.mob .me #btn-admin, body.mob .me #btn-logout { display: none; }
/* 手机聊天页只留聊天框：桌面那几个按钮在聊天信息页里都有对应项（面板→成员格、历史→查找聊天记录、
   文件→群文件、设置→管理群、删除会话→删除该会话），右上角只留一条 ☰ */
body.mob .chat-acts .link-btn, body.mob #btn-history { display: none; }
body.mob .panel { display: none; }
body.mob .mob-only { display: inline-flex; }
body.mob .side-tools { background: #12161b; border-bottom: 1px solid #202730; }
body.mob .side-tools input { background: #1b2128; border: 1px solid #262f3a; color: #e9edf2; }
body.mob #tools-single { display: none; }
body.mob #tools-group input { border-radius: 8px; }
body.mob .conv { padding: 11px 12px; border-bottom: 1px solid #1a2028; }
body.mob .conv:hover, body.mob .conv.on { background: #1b2128; }
body.mob .conv .avatar { width: 44px; height: 44px; border-radius: 8px; }
body.mob .conv-mid .t b { font-size: 15px; color: #e9edf2; }
body.mob .conv-mid .t i { color: #7c8795; }
body.mob .conv-mid p { color: #8b95a3; }
body.mob .conv-time, body.mob .conv .time { color: #7c8795; }
body.mob .side-foot { background: #12161b; border-top: 1px solid #202730; color: #7c8795; }
body.mob .staff-strip { background: #17222e; color: #7fb0ff; border-bottom: 1px solid #202730; }
body.mob .staff-strip.gray { background: #1b2128; color: #a9b3c1; }

/* ---- 页2：聊天 ---- */
body.mob .chat { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: none; background: #0f1317; min-width: 0; }
body.mob .main.chatting .chat { display: flex; }
body.mob .chat-head { background: #12161b; border-bottom: 1px solid #202730; padding: 8px 6px 8px 2px; gap: 2px; }
body.mob .chat-title { flex: 1; min-width: 0; }
body.mob .chat-title b { font-size: 16px; color: #e9edf2; }
body.mob .chat-title span { color: #8b95a3; }
body.mob .chat-acts .link-btn { display: none; }
body.mob .icon-btn { color: #cfd6df; background: transparent; border: 0; font-size: 20px; padding: 4px 8px; }
body.mob .msgs { background: #0f1317; }
body.mob .m .avatar { width: 40px; height: 40px; border-radius: 8px; font-size: 14px; }
body.mob .m .who { color: #8b95a3; font-size: 12px; }
body.mob .m .body { max-width: 74%; }
body.mob .bubble { background: #22282f; color: #e9edf2; box-shadow: none; }
body.mob .m.me .bubble { background: #1765d8; color: #fff; }
body.mob .m .bubble.file, body.mob .m.me .bubble.file { background: #22282f; border-color: #2c3542; color: #e9edf2; min-width: 210px; }
body.mob .img-cap { color: #cfd6df; }
body.mob .m.me .img-cap { color: #eaf2ff; }
body.mob .day, body.mob .sys { color: #7c8795; }
body.mob .role-tag { display: inline-block; font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 3px; margin-right: 4px; vertical-align: 1px; }
body.mob .role-tag.owner { background: #f5a623; color: #2b1c00; }
body.mob .role-tag.admin { background: #2f7d54; color: #eafaf1; }
body.mob .composer { background: #12161b; border-top: 1px solid #202730; }
body.mob #input { background: #1b2128; color: #e9edf2; border: 1px solid #262f3a; }
body.mob .tool, body.mob .tool-row .tool { color: #cfd6df; background: transparent; }
body.mob .emo-pop, body.mob .at-pop { background: #1b2128; border-color: #262f3a; }
body.mob .emo-h, body.mob .emo-hint { color: #8b95a3; }
body.mob .emo-grid button { background: #22282f; }
body.mob .at-hint { background: #1b2128; color: #cfd6df; border-color: #262f3a; }

/* ---- 页3：聊天信息（群资料）---- */
body.mob .main.show-info .mob-info { display: flex; }
body.mob .mob-info {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 11;
  flex-direction: column; background: #12161b;
}
body.mob .mob-info .chat-head { background: #12161b; }
.mob-info-body { flex: 1; overflow: auto; padding: 12px; }
.mi-card { background: #171d24; border-radius: 10px; padding: 4px 12px; margin-bottom: 12px; }
.mi-head { display: flex; gap: 10px; align-items: center; padding: 10px 0; }
.mi-head .avatar { width: 46px; height: 46px; border-radius: 8px; }
.mi-head .nm { font-size: 16px; color: #e9edf2; }
.mi-head .sub { font-size: 12px; color: #8b95a3; margin-top: 3px; }
.mi-tag { display: inline-block; font-size: 11px; color: #7fb0ff; background: #16233a; border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.mi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 4px; padding: 6px 0 12px; }
.mi-cell { text-align: center; font-size: 11px; color: #8b95a3; overflow: hidden; }
.mi-cell .avatar { width: 40px; height: 40px; border-radius: 8px; margin: 0 auto 4px; display: block; }
.mi-cell .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-cell.act .avatar { display: flex; align-items: center; justify-content: center; background: #1b2128; border: 1px dashed #3a4653; color: #cfd6df; font-size: 20px; }
.mi-cell.act.off .avatar { color: #5c6673; }
.mi-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid #202730; font-size: 14px; }
.mi-row:last-child { border-bottom: 0; }
.mi-row .k { color: #e9edf2; flex: none; }
.mi-row .v { color: #8b95a3; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 群公告那一行照 QQ：内容直接摊在行里（最多两行），不是一句"暂无" */
.mi-row .v.wrap { white-space: normal; text-align: right; flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-row .go { color: #5c6673; font-size: 16px; flex: none; }
.mi-sw { width: 44px; height: 24px; border-radius: 12px; background: #2a323c; position: relative; flex: none; cursor: pointer; transition: background .15s; }
.mi-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #cfd6df; transition: left .15s; }
.mi-sw.on { background: #1765d8; }
.mi-sw.on::after { left: 23px; background: #fff; }
.mi-note { font-size: 12px; color: #7c8795; padding: 0 2px 10px; }

/* ---- ＋ 菜单（底部弹层）---- */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #1b2128;
  border-top: 1px solid #262f3a; border-radius: 14px 14px 0 0; padding: 6px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .5);
}
.sheet.hidden { display: none; }
.sheet-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: #e9edf2; font-size: 15px; padding: 13px 6px; border-bottom: 1px solid #262f3a; }
.sheet-item:last-child { border-bottom: 0; }
.sheet-item.danger { color: #ff6b6b; }
.sheet-item.hidden { display: none; }
body:not(.mob) .sheet { display: none !important; }

/* 手机模式下弹层/对话框也跟着变深 */
body.mob .modal { background: #171d24; border-color: #262f3a; color: #e9edf2; }
body.mob .modal-title { color: #e9edf2; border-bottom-color: #202730; }
body.mob .modal-body input, body.mob .modal-body textarea, body.mob .modal-body select { background: #1b2128; border-color: #262f3a; color: #e9edf2; }
body.mob .mask { background: rgba(0, 0, 0, .62); }
body.mob .mini { background: #1b2128; border-color: #2c3542; color: #cfd6df; }
body.mob .toast { background: rgba(20, 26, 33, .94); color: #e9edf2; }
body.mob .auth-box { background: #12161b; color: #e9edf2; }
body.mob .auth-box input { background: #1b2128; border-color: #262f3a; color: #e9edf2; }
body.mob .tab { color: #8b95a3; }
body.mob .tab.on { color: #7fb0ff; }

/* ---- 手机长按菜单：底部抽屉（与桌面右键菜单同一份 DOM，只是换个摆法）---- */
body.mob .ctx-menu {
  left: 0 !important; right: 0; top: auto !important; bottom: 0;
  min-width: 0; max-height: 70vh; overflow: auto;
  border: 0; border-radius: 14px 14px 0 0; padding: 6px 0 calc(10px + env(safe-area-inset-bottom));
  background: #1b2128; box-shadow: 0 -8px 24px rgba(0, 0, 0, .5);
}
body.mob .ctx-item { padding: 14px 18px; font-size: 15px; color: #e9edf2; }
body.mob .ctx-item:hover { background: #222b35; color: #7fb0ff; }
body.mob .ctx-item.danger { color: #ff6b6b; }
body.mob .ctx-item.off { color: #6b7480; }
body.mob .ctx-sep { background: #262f3a; }
/* 长按要能自己接管：别让系统弹出选字/存图那套 */
body.mob #msgs .m, body.mob #msgs .m * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* 群设置里的欢迎语文案框 */
.welcome-text { width: 100%; box-sizing: border-box; margin: 6px 0 4px; padding: 8px 10px; font-size: 13px; font-family: inherit; line-height: 1.5; border: 1px solid #e3e7ee; border-radius: 8px; resize: vertical; }
body.mob .welcome-text { background: #12161b; border-color: #262f3a; color: #e9edf2; }

/* ---- 头像选择（内置头像网格 + ＋ 本地上传裁剪）---- */
.avatar.pickable { cursor: pointer; }
.av-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 8px 0 10px; }
.av-item { aspect-ratio: 1 / 1; border-radius: 10px; border: 2px solid transparent; background-size: cover; background-position: center; background-color: #f2f5fa; cursor: pointer; padding: 0; }
.av-item:hover { border-color: #9cc0ff; }
.av-item.on { border-color: #1b6ef5; box-shadow: 0 0 0 2px rgba(27, 110, 245, .18); }
.av-item.plus { display: flex; align-items: center; justify-content: center; font-size: 26px; color: #64748b; border: 1px dashed #c7d2e0; background: #f7f9fc; }
body.mob .av-grid { grid-template-columns: repeat(4, 1fr); }
body.mob .av-item.plus { background: #1b2128; color: #cfd6df; border-color: #3a4653; }

/* ---- 私聊行右侧的关闭按钮 ---- */
.conv-x { flex: none; width: 22px; height: 22px; margin-left: 2px; border: 0; border-radius: 50%; background: transparent; color: #9aa4b2; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.conv-x:hover { background: #fde8e8; color: #d33; }
body.mob .conv-x { color: #6b7480; }
body.mob .conv-x:hover { background: #2a2024; color: #ff6b6b; }

/* 右下角的界面版本章：只有新版 app.js 会写它；空着就是加载到了旧文件 */
.build-stamp { position: fixed; right: 8px; bottom: 6px; z-index: 5; font-size: 11px; color: #9aa4b2; background: rgba(255,255,255,.72); padding: 2px 6px; border-radius: 6px; pointer-events: none; }
body.mob .build-stamp { color: #6b7480; background: rgba(15,19,23,.7); }

/* 头像统一圆形（2026-11-11 用户要求：不要方形） */
.avatar, .avatar.sm, .avatar.grp, .pf-head .avatar, .mi-cell .avatar,
body.mob .me .avatar, body.mob .conv .avatar, body.mob .m .avatar { border-radius: 50% !important; }
/* 选头像的格子也跟着圆，预览和实际显示一致 */
.av-item { border-radius: 50%; }

/* 移出成员时的封禁范围选择 */
.ban-opts { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.ban-opt { display: flex; gap: 8px; padding: 9px 10px; border: 1px solid #e3e7ee; border-radius: 8px; cursor: pointer; }
.ban-opt.on { border-color: #1b6ef5; background: #f3f7ff; }
.ban-opt input { margin-top: 3px; }
.ban-opt .nm { font-size: 14px; font-weight: 600; }
.ban-opt .x { font-size: 12px; color: #7c8795; margin-top: 2px; }
body.mob .ban-opt { border-color: #262f3a; }
body.mob .ban-opt.on { border-color: #2f6bff; background: #151d28; }

/* 搜群实时候选（输入即出，点一条即申请） */
.sg-pop { position: fixed; z-index: 70; max-height: 52vh; overflow: auto; background: #fff; border: 1px solid #e3e7ee; border-radius: 10px; box-shadow: 0 10px 28px rgba(20, 40, 70, .18); padding: 4px 0; }
.sg-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; }
.sg-row:hover { background: #eff4ff; }
.sg-row .mid { flex: 1; min-width: 0; }
.sg-row .nm { font-size: 13px; color: #1f2a37; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-row .x { font-size: 11px; color: #7c8795; margin-top: 2px; }
.sg-tag { flex: none; font-size: 12px; color: #1b6ef5; }
.sg-empty { padding: 10px 12px; font-size: 12px; color: #7c8795; }
body.mob .sg-pop { background: #1b2128; border-color: #262f3a; }
body.mob .sg-row:hover { background: #222b35; }
body.mob .sg-row .nm { color: #e9edf2; }
body.mob .sg-row .x { color: #8b95a3; }
body.mob .sg-tag { color: #7fb0ff; }

/* 公告每条的 置顶/编辑/删除 */
.notice-ops { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.notice-ops .mini { padding: 3px 9px; font-size: 12px; }

/* 公告头条：红色标记，列表里永远第一 */
.head-tag { margin-left: 6px; font-size: 11px; color: #fff; background: #d33; border-radius: 4px; padding: 1px 6px; }

/* 推广文案 / 更新日志正文 */
.text-box { white-space: pre-wrap; word-break: break-word; max-height: 52vh; overflow: auto; font-size: 13px; line-height: 1.65; background: #f7f9fc; border: 1px solid #e3e7ee; border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
body.mob .text-box { background: #12161b; border-color: #262f3a; color: #e9edf2; }

/* 聊天里的发送者昵称：放大 1.2 倍 + 彩色流光（2026-11-11 用户要求） */
/* 只给最近 30 条加动画（renderMsgs 里打 .flow），避免上百条昵称同时逐帧重绘 */
.m .who {
  font-size: 13.2px; /* 原 11px 的 1.2 倍 */
  font-weight: 400;
  background-image: linear-gradient(100deg, #ff5f6d 0%, #ffc371 18%, #4ade80 36%, #38bdf8 54%, #a78bfa 72%, #fb7185 90%, #ff5f6d 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.m .who.flow { animation: who-flow 8s steps(28, end) infinite; }
body.mob .m .who { font-size: 14.4px; color: transparent; -webkit-text-fill-color: transparent; /* 手机原 12px 的 1.2 倍 */ }
@keyframes who-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ---------------- 聊天气泡皮肤（按发送者显示，桌面/手机同一套） ----------------
   风格参考：渐变内高光 / 黏土双层内阴影 / 磨砂玻璃 / 霓虹描边 / 极光网格 / 新拟物硬投影 */
.bubble.sk-sky {
  background: linear-gradient(160deg, #eaf5ff 0%, #cfe7ff 55%, #bcdcff 100%) !important;
  color: #0b3a66 !important;
  border: 1px solid #a9cdf5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -8px 18px rgba(120, 170, 240, .18), 0 2px 6px rgba(40, 90, 150, .12);
}
.bubble.sk-mint {
  background: linear-gradient(160deg, #e8fdf4 0%, #cbf7e3 55%, #b4eed6 100%) !important;
  color: #0b4a38 !important;
  border: 1px solid #9fe3c6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -8px 18px rgba(60, 190, 140, .16), 0 2px 6px rgba(20, 120, 90, .12);
}
.bubble.sk-peach {
  background: linear-gradient(160deg, #fff3ee 0%, #ffdfd4 55%, #ffd0c0 100%) !important;
  color: #7a2b1c !important;
  border: 1px solid #ffc4b0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -8px 18px rgba(240, 140, 110, .16), 0 2px 6px rgba(180, 90, 60, .12);
}
.bubble.sk-neon {
  background: linear-gradient(150deg, #0f1620 0%, #18212e 60%, #101a26 100%) !important;
  color: #d9f7ff !important;
  border: 1px solid rgba(0, 229, 255, .55);
  box-shadow: 0 0 10px rgba(0, 229, 255, .28), inset 0 0 12px rgba(0, 229, 255, .1);
  text-shadow: 0 0 6px rgba(0, 229, 255, .45);
}
.bubble.sk-aurora {
  background:
    radial-gradient(60% 120% at 8% 0%, rgba(168, 85, 247, .55), transparent 60%),
    radial-gradient(52% 100% at 92% 8%, rgba(59, 130, 246, .55), transparent 62%),
    radial-gradient(64% 120% at 50% 100%, rgba(236, 72, 153, .42), transparent 66%),
    linear-gradient(135deg, #2a1b4a, #1b2a4a 60%, #301b3a) !important;
  color: #f3e8ff !important;
  border: 1px solid rgba(196, 181, 253, .45);
  box-shadow: inset 0 0 12px rgba(139, 92, 246, .25), 0 2px 8px rgba(30, 10, 60, .35);
}
.bubble.sk-gold {
  background: linear-gradient(135deg, #221a0f 0%, #33270f 55%, #221a0f 100%) !important;
  color: #ffd98a !important;
  border: 1px solid rgba(212, 175, 55, .65);
  box-shadow: inset 0 0 0 1px rgba(255, 215, 120, .18), 0 2px 8px rgba(0, 0, 0, .35);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.bubble.sk-glass {
  background: rgba(255, 255, 255, .45) !important;
  color: #1e2a38 !important;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 6px 18px rgba(30, 60, 100, .12);
  backdrop-filter: blur(8px) saturate(1.2);
}
.bubble.sk-candy {
  background: linear-gradient(135deg, #ffd6e7 0%, #ffe9c7 35%, #d9f7d0 70%, #d6e9ff 100%) !important;
  color: #4a2a3a !important;
  border: 1px solid #ffd0e0;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(200, 120, 160, .14);
}
.bubble.sk-clay {
  background: #ffd9e3 !important;
  color: #6b2340 !important;
  border: 0;
  border-radius: 16px;
  box-shadow: inset 4px 4px 10px rgba(255, 255, 255, .85), inset -4px -4px 10px rgba(203, 92, 124, .3), 0 4px 10px rgba(203, 92, 124, .18);
}
.bubble.sk-ocean {
  background: linear-gradient(160deg, #e0fbff 0%, #bfe9f7 55%, #a8dcf0 100%) !important;
  color: #063b4f !important;
  border: 1px solid #9fd3e6;
  box-shadow: inset 0 1px 0 #fff, inset 0 -10px 20px rgba(60, 140, 170, .15), 0 2px 6px rgba(20, 90, 110, .12);
}
.bubble.sk-neo {
  background: #fff6c9 !important;
  color: #141414 !important;
  border: 2px solid #141414;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #141414;
}
.bubble.sk-terminal {
  background: #07120c !important;
  color: #7cffb2 !important;
  border: 1px solid #1f6b46;
  box-shadow: inset 0 0 12px rgba(34, 197, 94, .15), 0 2px 8px rgba(0, 0, 0, .4);
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  text-shadow: 0 0 6px rgba(34, 197, 94, .45);
}
.bubble.sk-sakura {
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, .65) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 74%, rgba(255, 255, 255, .5) 0 2px, transparent 3px),
    linear-gradient(135deg, #ffe6f0, #ffd0e2) !important;
  background-size: 40px 40px, 56px 56px, auto !important;
  color: #6b2540 !important;
  border: 1px solid #ffc2d8;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(200, 120, 160, .12);
}
body.mob .bubble.sk-glass {
  background: rgba(255, 255, 255, .12) !important;
  color: #e9edf2 !important;
  border-color: #3a4656;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 18px rgba(0, 0, 0, .35);
}
/* 追加款：紫罗兰 / 蒸汽波 / 水墨 / 星空 / 珍珠 / 抹茶 / 焦糖 */
.bubble.sk-violet {
  background: linear-gradient(160deg, #f6f0ff 0%, #e6d8ff 55%, #d6c2ff 100%) !important;
  color: #4a2d7a !important;
  border: 1px solid #c9b2f5;
  box-shadow: inset 0 1px 0 #fff, inset 0 -8px 18px rgba(150, 110, 230, .16), 0 2px 6px rgba(90, 50, 150, .12);
}
.bubble.sk-vapor {
  background: linear-gradient(120deg, #ff9ad5 0%, #ffd1e8 30%, #b8f0ff 65%, #9ad8ff 100%) !important;
  color: #3b1450 !important;
  border: 1px solid #ffc0e2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 10px rgba(190, 120, 220, .22);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.bubble.sk-ink {
  background:
    radial-gradient(80% 120% at 10% 0%, rgba(0, 0, 0, .05), transparent 60%),
    linear-gradient(160deg, #fbf8ef, #f2ecdc) !important;
  color: #1f2328 !important;
  border: 1px solid #ddd3bc;
  box-shadow: inset 0 0 18px rgba(120, 100, 60, .1), 0 2px 6px rgba(60, 50, 30, .1);
}
.bubble.sk-star {
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 38%, rgba(255, 255, 255, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 76%, rgba(255, 255, 255, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 82%, rgba(255, 255, 255, .6) 0 1px, transparent 2px),
    linear-gradient(150deg, #101a33, #1b2a52 60%, #0e1730) !important;
  background-size: 72px 72px, 96px 96px, 120px 120px, 60px 60px, auto !important;
  color: #eaf2ff !important;
  border: 1px solid rgba(120, 160, 255, .45);
  box-shadow: inset 0 0 14px rgba(80, 120, 255, .2), 0 2px 8px rgba(10, 20, 50, .4);
  text-shadow: 0 0 6px rgba(140, 180, 255, .5);
}
.bubble.sk-pearl {
  background: linear-gradient(135deg, #ffffff 0%, #ffeef7 30%, #eef6ff 60%, #f6f0ff 100%) !important;
  color: #2b3442 !important;
  border: 1px solid #e6e0f0;
  box-shadow: inset 0 1px 0 #fff, inset 0 -6px 16px rgba(180, 200, 240, .18), 0 2px 6px rgba(80, 100, 140, .1);
}
.bubble.sk-matcha {
  background: linear-gradient(160deg, #eefbe5 0%, #d8f3c8 55%, #c3e9ae 100%) !important;
  color: #1e4a2b !important;
  border: 1px solid #a9d98f;
  box-shadow: inset 0 1px 0 #fff, inset 0 -8px 18px rgba(90, 160, 60, .16), 0 2px 6px rgba(40, 100, 30, .12);
}
.bubble.sk-caramel {
  background: linear-gradient(160deg, #fff1e0 0%, #ffd9b3 55%, #f7c890 100%) !important;
  color: #4a2a12 !important;
  border: 1px solid #e8b57e;
  box-shadow: inset 0 1px 0 #fff, inset 0 -8px 18px rgba(190, 120, 50, .16), 0 2px 6px rgba(130, 80, 30, .12);
}

/* ---------------- 聊天字体（按发送者显示） ---------------- */
.ft-kai { font-family: "KaiTi", "楷体", "STKaiti", serif; }
.ft-xing { font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", cursive; }
.ft-song { font-family: "SimSun", "宋体", "Songti SC", serif; }
.ft-hei { font-family: "SimHei", "黑体", "Heiti SC", sans-serif; }
.ft-yuan { font-family: "YouYuan", "幼圆", "PingFang SC", "Microsoft YaHei", sans-serif; }
.ft-li { font-family: "LiSu", "隶书", "STLiti", serif; }
.ft-hand { font-family: "LongCang", "FZShuTi", "方正舒体", "KaiTi", cursive; font-size: 1.12em; }
.ft-mono { font-family: ui-monospace, Consolas, "Courier New", monospace; }
.ft-yahei { font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif; }
.ft-fangsong { font-family: "FangSong", "仿宋", "STFangsong", serif; }
.ft-wei { font-family: "STXinwei", "华文新魏", "SimHei", serif; }
.ft-cai { font-family: "STCaiyun", "华文彩云", "SimHei", fantasy; }
.ft-deng { font-family: "DengXian", "等线", "Microsoft YaHei", sans-serif; }
.ft-xisong { font-family: "ZCOOLXiaoWei", "Songti SC", "SimSun", "宋体", serif; font-weight: 400 !important; }
/* 用户明确要求：聊天字体一律不加粗（含浏览器对缺失字重的合成粗体） */
.ft-kai, .ft-xing, .ft-song, .ft-hei, .ft-yuan, .ft-li, .ft-hand,
.ft-mono, .ft-yahei, .ft-fangsong, .ft-wei, .ft-cai, .ft-deng { font-weight: 400 !important; }
/* 字体选择窗 */
.ft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 10px; }
.ft-item { border: 2px solid transparent; border-radius: 10px; padding: 10px 8px; cursor: pointer; text-align: center; background: #f7f9fc; }
.ft-item:hover { border-color: #9cc0ff; }
.ft-item.on { border-color: #1b6ef5; background: #eef4ff; }
.ft-demo { font-size: 15px; color: #1f2a37; line-height: 1.5; font-weight: 400; }
.ft-name { margin-top: 6px; font-size: 12px; color: #5b6675; }
.ft-w { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px; font-size: 10px; line-height: 14px; vertical-align: 1px; background: #eef2f7; color: #6b7683; }
.ft-w.w-thin { background: #eaf7ee; color: #1e8e4e; }
.ft-w.w-bold { background: #fdecec; color: #c0392b; }
body.mob .ft-item { background: #12161b; }
body.mob .ft-item.on { background: #17222e; border-color: #2f6bff; }
body.mob .ft-demo { color: #e9edf2; }
body.mob .ft-name { color: #a9b3c1; }

/* 选择窗预览 */
.bub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 10px; }
.bub-item { border: 2px solid transparent; border-radius: 10px; padding: 10px 8px; cursor: pointer; text-align: center; background: #f7f9fc; }
.bub-item:hover { border-color: #9cc0ff; }
.bub-item.on { border-color: #1b6ef5; background: #eef4ff; }
.bub-item .bubble.demo { display: inline-block; font-size: 13px; padding: 7px 12px; }
.bub-name { margin-top: 8px; font-size: 12px; color: #5b6675; }
body.mob .bub-item { background: #12161b; }
body.mob .bub-item.on { background: #17222e; border-color: #2f6bff; }
body.mob .bub-name { color: #a9b3c1; }

/* 推广图（管理员上传，玩家保存后发 QQ） */
.promo-img { display: block; max-width: 100%; max-height: 50vh; margin: 6px auto; border-radius: 10px; border: 1px solid #e3e7ee; }
.promo-img-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.promo-img-row .promo-img { margin: 0; max-height: 140px; max-width: 160px; }
body.mob .promo-img { border-color: #262f3a; }

/* 装到桌面（PWA）：iPhone 分享→添加到主屏幕；安卓/电脑浏览器可直接安装 */
.dl-box { display: flex; flex-direction: column; gap: 10px; }
.dl-warn { font-size: 12px; color: #b54708; background: #fff7e6; border: 1px solid #ffe1a8; border-radius: 8px; padding: 8px 10px; line-height: 1.6; }
.dl-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e3e7ee; border-radius: 10px; background: #f8fafc; }
.dl-info { flex: 1; min-width: 0; }
.dl-name { font-size: 14px; font-weight: 600; color: #1e2733; }
.dl-desc { font-size: 12px; color: #6b7683; line-height: 1.5; margin-top: 2px; }
.dl-btn { flex: none; display: inline-block; padding: 7px 14px; border-radius: 8px; background: #1b6ef5; color: #fff; font-size: 13px; text-decoration: none; border: 1px solid #1b6ef5; cursor: pointer; }
.dl-btn:hover { background: #1660d8; }
.dl-btn.ghost { background: #fff; color: #1b6ef5; }
.dl-hint { font-size: 12px; color: #6b7683; line-height: 1.6; }
body.mob .dl-row { background: #12161b; border-color: #262f3a; }
body.mob .dl-name { color: #e9edf2; }
body.mob .dl-desc, body.mob .dl-hint { color: #9aa5b3; }
body.mob .dl-btn.ghost { background: transparent; color: #7fb0ff; border-color: #2f6bff; }
body.mob .dl-warn { background: #241a0c; border-color: #5a431a; color: #f5c26b; }
.install-tip { position: fixed; inset: 0; z-index: 80; background: rgba(10,16,26,.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.install-card { width: min(360px, 100%); background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.install-card-title { font-size: 16px; font-weight: 700; color: #1e2733; margin-bottom: 10px; }
.install-step { font-size: 13px; color: #33415a; line-height: 1.7; }
.install-hint { margin-top: 8px; font-size: 12px; color: #6b7683; }
.install-card .btn-primary { margin-top: 12px; width: 100%; }
body.mob .install-card { background: #151a20; }
body.mob .install-card-title { color: #e9edf2; }
body.mob .install-step { color: #cfd6df; }
body.mob .install-hint { color: #9aa5b3; }