/* ============================================================
   play-im.css — DemanPlay 统一私信(IM)· 完整版(对齐可交互原型)
   左侧常驻头像坞 .im-rail → 点开左展开覆盖层 .imo(分类列表 + 对话线程)
   官方客服 = 置顶特殊会话;下冠名/送礼物快捷键 + ⋯菜单 + 富举报弹窗。
   仅登录可见;变量走 play.css;手机端响应式。
   ============================================================ */

/* ===== 覆盖层 ===== */
.imo{ position:fixed; inset:0; z-index:9995; display:none; }
.imo.open{ display:block; }
.imo-mask{ position:absolute; inset:0; background:rgba(8,6,16,.62); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.imo-panel{ position:absolute; left:0; top:0; bottom:0; width:min(920px,94vw); display:grid; grid-template-columns:312px 1fr; background:var(--bg-2); border-right:1.5px solid var(--line); box-shadow:0 0 80px -10px rgba(0,0,0,.7); animation:imslide .25s ease; }
@keyframes imslide{ from{ transform:translateX(-24px); opacity:.4; } }
.imc-list{ display:flex; flex-direction:column; border-right:1.5px solid var(--line); min-width:0; min-height:0; }
.imc-hd{ display:flex; align-items:center; gap:10px; padding:15px 16px 0; }
.imc-back{ width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); box-shadow:0 8px 20px -10px var(--v-signature); }
.imc-back svg{ width:18px; height:18px; }
.imc-hd h2{ font-family:var(--cn); font-weight:900; font-size:19px; }
.imc-tabs{ display:flex; gap:8px; padding:14px 16px 12px; flex-wrap:wrap; }
.imc-tab{ font-family:var(--hud); font-weight:700; font-size:13px; padding:8px 16px; border-radius:999px; border:0; cursor:pointer; background:var(--surface); color:var(--text-mute); transition:.14s; }
.imc-tab:hover{ color:var(--text-dim); }
.imc-tab.on{ background:var(--v-signature); color:#fff; }
.imc-search{ margin:0 16px 10px; display:flex; align-items:center; gap:8px; padding:10px 13px; border-radius:11px; background:var(--surface); border:1.5px solid var(--line); }
.imc-search svg{ width:14px; height:14px; color:var(--text-mute); flex:none; }
.imc-search input{ flex:1; background:transparent; border:0; outline:none; font-family:var(--cn); font-size:13px; color:var(--text); }
.imc-search input::placeholder{ color:var(--text-mute); }
.imc-convos{ flex:1; overflow-y:auto; padding:4px 8px 10px; }
.imc{ display:flex; align-items:center; gap:11px; padding:11px 10px; border-radius:13px; cursor:pointer; transition:.13s; }
.imc:hover{ background:var(--surface); }
.imc.on{ background:color-mix(in oklab,var(--v-signature) 14%,var(--surface)); box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--v-signature) 40%,transparent); }
.imc[hidden]{ display:none; }
.imc .av{ width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-family:var(--display); font-style:italic; font-weight:800; font-size:16px; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18); position:relative; background-size:cover; background-position:center; }
.imc .av.cs{ background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); }
.imc .av .on{ position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%; background:var(--ok); border:2.5px solid var(--bg-2); z-index:2; }
.imc .mid{ flex:1; min-width:0; }
.imc .r1{ display:flex; align-items:center; gap:7px; }
.imc .nm{ font-family:var(--cn); font-weight:700; font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.imc .tg{ font-family:var(--hud); font-weight:700; font-size:9px; padding:2px 6px; border-radius:5px; flex:none; }
.imc .tg.cs{ background:color-mix(in oklab,var(--v-bright) 20%,transparent); color:var(--v-bright); }
.imc .tg.order{ background:color-mix(in oklab,var(--a-cyan) 18%,transparent); color:var(--a-cyan); }
.imc .tg.crown{ background:linear-gradient(135deg,#ffe08a,#ffc53d); color:#231600; }
.imc .tm{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--text-mute); flex:none; }
.imc .r2{ display:flex; align-items:center; gap:7px; margin-top:4px; }
.imc .pv{ font-family:var(--cn); font-size:12px; color:var(--text-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.imc .unb{ min-width:18px; height:18px; padding:0 5px; border-radius:99px; display:inline-grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:10px; background:#ff4d6a; color:#fff; }
.imc .pin{ color:var(--a-amber); flex:none; display:inline-flex; } .imc .pin svg{ width:11px; height:11px; display:block; }
.imc.unread .nm::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#ff4d6a; margin-right:6px; vertical-align:middle; box-shadow:0 0 6px #ff4d6a; }

/* ===== 线程 ===== */
.imt{ display:flex; flex-direction:column; min-width:0; min-height:0; background:linear-gradient(180deg,var(--bg),var(--bg-2)); }
.imt-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--text-mute); text-align:center; padding:20px; }
.imt-empty .ei{ width:64px; height:64px; border-radius:20px; display:grid; place-items:center; font-size:30px; background:var(--surface); border:1.5px solid var(--line); }
.imt-empty .et{ font-family:var(--cn); font-size:14px; color:var(--text-dim); }
.imt-empty .es{ font-family:var(--mono); font-size:11px; }
.imt-hd{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:11px; padding:14px 18px; border-bottom:1.5px solid var(--line); background:var(--bg-2); }
.imt-hd .av{ width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-family:var(--display); font-style:italic; font-weight:800; font-size:15px; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18); background-size:cover; background-position:center; position:relative; }
.imt-hd .av.cs{ background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); }
.imt-hd .nm{ font-family:var(--cn); font-weight:800; font-size:15px; display:flex; align-items:center; gap:7px; }
.imt-hd .sub{ font-family:var(--mono); font-size:10.5px; color:var(--text-mute); margin-top:2px; }
.imt-hd .sub .onl{ color:var(--ok); }
.imt-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:6px; }
.imt-tags .tg{ font-family:var(--hud); font-weight:700; font-size:9.5px; padding:2px 7px; border-radius:6px; }
.imt-tags .tg.order{ background:color-mix(in oklab,var(--a-cyan) 18%,transparent); color:var(--a-cyan); }
.imt-tags .tg.crown{ background:linear-gradient(135deg,#ffe08a,#ffc53d); color:#231600; }
.imt-tags .tg.role{ background:color-mix(in oklab,var(--a-mint) 18%,transparent); color:var(--a-mint); }
.imt-tags .tg.trait{ background:color-mix(in oklab,var(--a-pink) 16%,transparent); color:var(--a-pink); }
.imt-tags .tg.rate{ background:color-mix(in oklab,var(--a-amber) 16%,transparent); color:var(--a-amber); }
.imt-quick{ display:inline-flex; align-items:center; gap:5px; font-family:var(--hud); font-weight:700; font-size:11.5px; padding:8px 12px; border-radius:9px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; white-space:nowrap; transition:.14s; }
.imt-quick svg{ width:13px; height:13px; }
.imt-quick.crown{ color:#231600; background:linear-gradient(135deg,#ffe08a,#ffc53d); border-color:transparent; }
.imt-quick.gift{ color:var(--a-pink); border-color:color-mix(in oklab,var(--a-pink) 32%,var(--line)); }
.imt-quick.fav{ color:var(--a-amber); border-color:color-mix(in oklab,var(--a-amber) 38%,var(--line)); background:color-mix(in oklab,var(--a-amber) 8%,var(--surface)); }
.imt-quick.direct{ color:var(--v-bright,#a78bfa); border-color:color-mix(in oklab,var(--v-bright,#a78bfa) 40%,var(--line)); background:color-mix(in oklab,var(--v-bright,#a78bfa) 9%,var(--surface)); }
.imt-quick.direct svg{ width:12px; height:12px; }

/* 系统消息富卡片(冠名赠送/指定派单):--sc = 主题色 */
.im-syscard{ display:flex; gap:12px; align-items:flex-start; width:min(330px,72vw); padding:12px 13px; border-radius:15px;
  background:color-mix(in oklab,var(--sc,#ffc53d) 9%,var(--bg-2)); border:1.5px solid color-mix(in oklab,var(--sc,#ffc53d) 38%,transparent); }
.im-syscard .sc-img{ width:76px; height:76px; flex:none; border-radius:14px; background-size:contain; background-repeat:no-repeat; background-position:center;
  background-color:rgba(255,255,255,.04);
  border:1px solid color-mix(in oklab,var(--sc,#ffc53d) 40%,transparent); }
.im-syscard .sc-img.sc-ic{ display:grid; place-items:center; font-size:24px; background:color-mix(in oklab,var(--sc,#ffc53d) 16%,transparent); }
.im-syscard .sc-bd{ min-width:0; flex:1; }
.im-syscard .sc-t{ font-family:var(--cn); font-weight:800; font-size:13.5px; line-height:1.35; }
.im-syscard .sc-s{ font-size:11.5px; color:var(--text-mute); margin-top:3px; line-height:1.5; }
.im-syscard .sc-btn{ display:inline-flex; align-items:center; gap:4px; margin-top:9px; padding:6px 12px; border-radius:999px;
  font-family:var(--hud); font-weight:700; font-size:11.5px; text-decoration:none; color:var(--sc,#ffc53d);
  background:color-mix(in oklab,var(--sc,#ffc53d) 16%,transparent); border:1px solid color-mix(in oklab,var(--sc,#ffc53d) 42%,transparent); transition:.14s; }
.im-syscard .sc-btn:hover{ transform:translateY(-1px); filter:brightness(1.15); }
.imm.me .im-syscard{ margin-left:auto; }
.imt-quick:hover{ transform:translateY(-1px); }
.imt-quick[hidden]{ display:none; }
.imt-hd .acts{ margin-left:auto; display:flex; gap:8px; position:relative; }
.imt-ic{ width:34px; height:34px; border-radius:9px; border:1.5px solid var(--line); background:var(--surface); color:var(--text-mute); display:grid; place-items:center; cursor:pointer; transition:.14s; }
.imt-ic:hover{ color:var(--text); border-color:var(--text-mute); } .imt-ic svg{ width:15px; height:15px; }
.imt-ic.danger:hover{ color:var(--a-coral); border-color:color-mix(in oklab,var(--a-coral) 40%,var(--line)); }
.imt-order{ display:flex; align-items:center; gap:9px; padding:9px 18px; background:color-mix(in oklab,var(--a-cyan) 9%,var(--bg-2)); border-bottom:1px solid color-mix(in oklab,var(--a-cyan) 22%,var(--line)); font-family:var(--cn); font-size:12px; color:var(--text-dim); }
.imt-order b{ color:var(--text); } .imt-order .go{ margin-left:auto; font-family:var(--hud); font-weight:700; font-size:11px; color:var(--a-cyan); cursor:pointer; display:inline-flex; align-items:center; gap:4px; } .imt-order .go svg{ width:11px; height:11px; }
.imt-msgs{ flex:1; min-height:0; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:11px; }
.imt-day{ align-self:center; font-family:var(--mono); font-size:10px; color:var(--text-mute); background:var(--surface); padding:3px 11px; border-radius:999px; }
.imm{ display:flex; gap:9px; max-width:74%; }
.imm .av{ width:28px; height:28px; border-radius:50%; flex:none; align-self:flex-end; display:grid; place-items:center; color:#fff; font-family:var(--display); font-style:italic; font-weight:800; font-size:11px; background-size:cover; background-position:center; position:relative; }
.imm .bub{ padding:10px 13px; border-radius:4px 14px 14px 14px; font-family:var(--cn); font-size:13.5px; line-height:1.5; color:var(--text); background:var(--surface); border:1px solid var(--line-soft); word-break:break-word; }
.imm .bub img{ display:block; max-width:200px; max-height:200px; border-radius:10px; object-fit:cover; margin:-2px 0; cursor:pointer; }
.imm .bt{ font-family:var(--mono); font-size:9.5px; color:var(--text-mute); margin-top:4px; }
.imm.me{ align-self:flex-end; flex-direction:row-reverse; }
.imm.me .bub{ border-radius:14px 4px 14px 14px; background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); border-color:transparent; color:#fff; }
.imm.me .bt{ text-align:right; }
/* 系统提示条(交易动作自动消息):居中、灰调、不带头像不分左右 */
.imm-sys{ align-self:center; max-width:90%; display:flex; flex-direction:column; align-items:center; gap:4px; margin:3px 0; }
.imm-sys-b{ font-family:var(--cn); font-size:13.5px; line-height:1.6; color:var(--text); text-align:center; background:color-mix(in oklab,var(--v-bright,#8b6dff) 11%,transparent); border:1px solid var(--line-soft); border-radius:12px; padding:9px 16px; word-break:break-word; }
.imm-sys-t{ font-family:var(--mono); font-size:10px; color:var(--text-mute); }
/* 系统替我发给对方的提示:靠右 + 调暗 + 虚线框 + 标签,和「发给我的」一眼分开(2026-07-22) */
.imm-sys.sysout{ align-self:flex-end; align-items:flex-end; max-width:82%; }
.imm-sys.sysout .imm-sys-b{ opacity:.62; background:var(--surface,rgba(255,255,255,.04)); border-style:dashed; text-align:left; font-size:12.5px; }
.imm-sys-who{ font-family:var(--cn); font-size:10.5px; font-weight:700; color:var(--text-mute); background:var(--surface,rgba(255,255,255,.05)); border:1px solid var(--line-soft); border-radius:999px; padding:2px 9px; }
/* 系统通知头像:金→紫,与客服(纯紫)区分 */
.imc .av.sys, .imt-hd .av.sys, .im-rail .rl-av.sys{ background:linear-gradient(135deg,#ffce5a,#8b6cf0); }
.im-rail .rl-av.sys{ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2), 0 0 0 2px color-mix(in oklab,#ffce5a 40%,transparent); }
.imt-input{ display:flex; align-items:flex-end; gap:10px; padding:13px 16px; border-top:1.5px solid var(--line); background:var(--bg-2); }
.imt-input .box{ flex:1; display:flex; align-items:flex-end; padding:10px 14px; border-radius:12px; background:var(--surface); border:1.5px solid var(--line); }
.imt-input .box input{ flex:1; background:transparent; border:0; outline:none; font-family:var(--cn); font-size:13.5px; color:var(--text); height:20px; line-height:20px; padding:0; }
/* 输入框自动长高(2026-07-18 用户:换行看不到之前打的字):JS 按 scrollHeight 撑到 ≤6 行,超出内部滚动 */
.imt-input .box textarea{ flex:1; background:transparent; border:0; outline:none; font-family:var(--cn); font-size:13.5px; color:var(--text); resize:none; height:20px; min-height:20px; max-height:122px; line-height:20px; padding:0; overflow-y:auto; }
.imt-input .box input::placeholder, .imt-input .box textarea::placeholder{ color:var(--text-mute); }
.imt-send{ width:40px; height:40px; border-radius:11px; border:0; cursor:pointer; flex:none; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); box-shadow:0 8px 20px -10px var(--v-signature); }
.imt-send svg{ width:17px; height:17px; }

/* ===== ⋯菜单 ===== */
.im-menu{ position:absolute; right:0; top:42px; z-index:20; width:190px; padding:7px; border-radius:14px; background:var(--bg-2); border:1.5px solid var(--line); box-shadow:0 24px 60px -24px rgba(0,0,0,.8); display:none; }
.im-menu.open{ display:block; }
.imm-item{ width:100%; text-align:left; display:flex; align-items:center; gap:9px; font-family:var(--cn); font-weight:600; font-size:13.5px; color:var(--text-dim); padding:10px 12px; border:0; border-radius:9px; background:transparent; cursor:pointer; transition:.12s; }
.imm-item:hover{ background:var(--surface); color:var(--text); }
.imm-item.danger{ color:var(--a-coral); }
.imm-item.danger:hover{ background:color-mix(in oklab,var(--a-coral) 12%,transparent); }
.imm-sep{ height:1px; background:var(--line-soft); margin:6px 4px; }

/* ===== 左侧常驻头像坞 ===== */
.im-rail{ position:fixed; left:0; top:96px; z-index:9990; display:flex; flex-direction:column; align-items:center; gap:13px; padding:14px 12px; border-radius:0 18px 18px 0;
  background:color-mix(in oklab,var(--bg-2) 86%,transparent); border:1.5px solid var(--line); border-left:0; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:12px 0 36px -20px rgba(0,0,0,.7); }
.im-rail .rl-toggle{ width:30px; height:30px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; color:var(--text-mute); background:var(--surface); transition:.15s; }
.im-rail .rl-toggle:hover{ color:var(--text); }
.im-rail .rl-toggle svg{ width:15px; height:15px; transition:.2s; transform:rotate(180deg); }
.im-rail.collapsed .rl-toggle svg{ transform:none; }
.im-rail .rl-av{ position:relative; width:46px; height:46px; border-radius:50%; cursor:pointer; display:grid; place-items:center; color:#fff; font-family:var(--display); font-style:italic; font-weight:800; font-size:16px; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2); transition:transform .15s; background-size:cover; background-position:center; }
.im-rail .rl-av:hover{ transform:scale(1.08); }
.im-rail .rl-av.cs{ background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2), 0 0 0 2px color-mix(in oklab,var(--v-bright) 45%,transparent); }
.im-rail .rl-av .un{ position:absolute; top:-2px; right:-2px; min-width:17px; height:17px; padding:0 4px; border-radius:99px; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:9.5px; background:#ff4d6a; color:#fff; border:2px solid var(--bg-2); }
.im-rail .rl-av .on{ position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%; background:var(--ok); border:2.5px solid var(--bg-2); z-index:2; }
.im-rail .rl-more{ font-family:var(--mono); font-size:10px; color:var(--text-mute); cursor:pointer; }
.im-rail .rl-hideable{ display:flex; flex-direction:column; align-items:center; gap:13px; }
.im-rail.collapsed .rl-hideable{ display:none; }

/* ===== 举报弹窗(自包含 modal 壳) ===== */
.im-modal{ position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:24px; }
.im-modal.open{ display:flex; }
.im-mask{ position:absolute; inset:0; background:rgba(8,6,16,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.im-dialog{ position:relative; width:min(500px,96vw); max-height:92vh; overflow:auto; border-radius:18px; background:var(--bg-2); border:1.5px solid var(--line); box-shadow:0 40px 90px -30px rgba(0,0,0,.8); }
.im-dhd{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line-soft); }
.im-dhd .bar{ width:4px; height:18px; border-radius:3px; background:linear-gradient(180deg,var(--a-coral),oklch(0.62 0.18 22)); }
.im-dhd h3{ font-family:var(--cn); font-weight:800; font-size:16px; color:var(--text); flex:1; }
.im-dhd .x{ width:30px; height:30px; border-radius:8px; border:1.5px solid var(--line); background:var(--surface); color:var(--text-mute); cursor:pointer; display:grid; place-items:center; }
.im-dhd .x svg{ width:15px; height:15px; }
.im-dbd{ padding:18px; }
.im-dft{ display:flex; gap:11px; padding:0 18px 18px; }
.rp-obj{ display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:13px; margin-bottom:18px; background:color-mix(in oklab,var(--a-coral) 9%,var(--surface)); border:1px solid color-mix(in oklab,var(--a-coral) 24%,var(--line)); }
.rp-obj .av{ width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-family:var(--display); font-style:italic; font-weight:800; font-size:15px; background-size:cover; background-position:center; position:relative; }
.rp-obj .ot{ font-family:var(--cn); font-weight:700; font-size:14px; color:var(--text); }
.rp-obj .os{ font-family:var(--mono); font-size:10.5px; color:var(--text-mute); margin-top:3px; }
.rp-obj .safe{ margin-left:auto; font-family:var(--hud); font-weight:700; font-size:10px; color:var(--ok); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.rp-obj .safe svg{ width:13px; height:13px; }
.rp-grp{ margin-bottom:16px; } .rp-grp:last-child{ margin-bottom:0; }
.rp-lbl{ font-family:var(--cn); font-weight:700; font-size:13px; color:var(--text); margin-bottom:9px; display:flex; align-items:center; }
.rp-lbl .opt{ font-family:var(--mono); font-weight:400; font-size:11px; color:var(--text-mute); margin-left:4px; }
.rp-step{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--a-coral); color:#fff; font-family:var(--mono); font-weight:700; font-size:10px; margin-right:7px; }
.rp-types{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.rp-type{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:13px 8px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; transition:.14s; text-align:center; }
.rp-type:hover{ border-color:var(--text-mute); }
.rp-type.on{ border-color:var(--a-coral); background:color-mix(in oklab,var(--a-coral) 12%,transparent); box-shadow:inset 0 0 0 1px var(--a-coral); }
.rp-type .ti{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; font-size:16px; background:color-mix(in oklab,var(--a-coral) 16%,transparent); }
.rp-type .tl{ font-family:var(--cn); font-weight:600; font-size:11.5px; color:var(--text-dim); line-height:1.2; }
.rp-type.on .tl{ color:var(--text); }
.rp-ta{ width:100%; min-height:96px; resize:vertical; font-family:var(--cn); font-size:13.5px; line-height:1.5; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--text); outline:none; }
.rp-ta:focus{ border-color:var(--v-signature); } .rp-ta::placeholder{ color:var(--text-mute); }
.rp-cnt{ text-align:right; font-family:var(--mono); font-size:10.5px; color:var(--text-mute); margin-top:5px; }
.rp-up{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:22px; border-radius:13px; border:1.5px dashed var(--line); background:var(--surface); color:var(--text-mute); cursor:pointer; transition:.14s; }
.rp-up:hover{ border-color:var(--v-signature); color:var(--text-dim); } .rp-up svg{ width:28px; height:28px; opacity:.7; } .rp-up span{ font-family:var(--cn); font-size:12.5px; }
.im-btn{ font-family:var(--hud); font-weight:700; font-size:13px; padding:11px 16px; border-radius:11px; border:1.5px solid var(--line); background:var(--surface); color:var(--text-dim); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.im-btn:hover{ color:var(--text); border-color:var(--text-mute); }
.im-btn.coral{ border-color:transparent; color:#fff; background:linear-gradient(135deg,var(--a-coral),oklch(0.62 0.18 18)); }

/* ===== 手机端 =====
   断点 760 → 768(2026-07-25):本文件里「单栏 / 显示返回键 / 动作键横滑」三组手机规则
   原来分别写在 760 和 768 两个断点上,761–768px 这 8px 宽的区间因此是个死区 ——
   实测 764px:面板还是桌面双栏(312px 列表 + 405px 线程),却同时长出了手机版的返回键
   和「动作键独占一行横滑」的排法,而且 play-mbar 底栏(≤768)也已经出现了。
   返回键在双栏下点了等于没反应(列表本来就在旁边)。全站底栏断点是 768,这里对齐它。 */
@media(max-width:768px){
  .imo-panel{ width:100%; grid-template-columns:1fr; }
  .imo-panel.show-thread .imc-list{ display:none; }
  .imo-panel:not(.show-thread) .imt{ display:none; }
  .im-rail{ top:auto; bottom:78px; }
  .rp-types{ grid-template-columns:repeat(2,1fr); }
}

/* 我的在线状态选择器(列表头部):在线/游戏中/离开/隐身 */
.imc-hd{ position:relative; }
.imc-st{ position:relative; margin-left:auto; }
.imc-stbtn{ display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:999px; border:1px solid var(--line,rgba(255,255,255,.12)); background:var(--surface,rgba(255,255,255,.04)); color:var(--text-dim,#b9b3d4); font-family:var(--cn,system-ui); font-size:11.5px; font-weight:700; cursor:pointer; }
.imc-stbtn:hover{ border-color:var(--v-signature,#8b6dff); color:var(--text,#fff); }
.imc-stmenu{ display:none; position:absolute; right:0; top:calc(100% + 7px); z-index:30; min-width:168px; padding:6px; border-radius:13px; background:var(--bg-2,#171426); border:1.5px solid var(--line,rgba(255,255,255,.14)); box-shadow:0 18px 50px -16px rgba(0,0,0,.7); }
.imc-st.open .imc-stmenu{ display:grid; gap:2px; }
.imc-stitem{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; padding:8px 11px; border:none; border-radius:9px; background:transparent; color:var(--text,#eee); font-family:var(--cn,system-ui); font-size:12.5px; font-weight:700; text-align:left; cursor:pointer; }
.imc-stitem:hover{ background:color-mix(in oklab,var(--v-signature,#8b6dff) 16%,transparent); }
.imc-stitem small{ font-size:10px; font-weight:400; color:var(--text-mute,#8a84a8); }

/* ===== v5:手机返回键 + 表情/贴纸面板 + 手机线程头部整理 ===== */
.imt-back{ display:none; width:32px; height:32px; flex:none; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--text-dim); cursor:pointer; place-items:center; }
.imt-back svg{ width:17px; height:17px; }
.imt-input{ position:relative; }
.imt-emo{ position:absolute; left:10px; right:10px; bottom:calc(100% + 8px); z-index:30; display:none; max-height:290px; overflow-y:auto;
  border:1.5px solid var(--line); border-radius:16px; background:var(--bg-2); box-shadow:0 18px 50px -14px rgba(0,0,0,.75), 0 0 30px -16px var(--v-signature); padding:11px; }
.imt-emo.open{ display:block; }
.imemo-sec{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--text-mute); margin:4px 2px 7px; }
.imemo-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:8px; }
.imemo-stk{ border:1px solid transparent; border-radius:12px; background:transparent; padding:5px; cursor:pointer; transition:.14s; }
.imemo-stk:hover{ background:color-mix(in oklab,var(--v-signature) 12%,transparent); border-color:var(--line); transform:scale(1.06); }
.imemo-stk img{ width:100%; aspect-ratio:1; display:block; }
.imemo-grid.emojis{ grid-template-columns:repeat(8,1fr); }
.imemo-ch{ border:0; background:transparent; font-size:20px; line-height:1.5; border-radius:9px; cursor:pointer; padding:3px 0; }
.imemo-ch:hover{ background:color-mix(in oklab,var(--v-signature) 14%,transparent); transform:scale(1.12); }
@media(max-width:768px){
  .imt-back{ display:grid; }
  .imt-hd{ flex-wrap:wrap; align-items:center; row-gap:8px; padding:10px 12px; }
  .imt-hd .av{ width:34px; height:34px; font-size:13px; }
  .imt-hd .av + div{ flex:1 1 0; min-width:0; }
  .imt-hd .nm{ font-size:14px; }
  .imt-hd .sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* 操作按钮独占一行横滑,不再挤压名字/状态/资质竖排 */
  .imt-hd .acts{ order:5; flex:1 0 100%; margin-left:0; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .imt-hd .acts::-webkit-scrollbar{ display:none; }
  .imt-hd .acts > *{ flex:none; }
  .imt-tags{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .imt-tags::-webkit-scrollbar{ display:none; }
  .imt-tags .tg{ white-space:nowrap; flex:none; }
  .imemo-grid{ grid-template-columns:repeat(5,1fr); }
  .imemo-grid.emojis{ grid-template-columns:repeat(7,1fr); }
}

/* v6:官方客服窄条(明显但不占置顶会话位) + 表情面板分类 tab */
.imc.cs-slim{ display:flex; align-items:center; gap:10px; padding:13px 14px; margin:6px 8px 2px; border-radius:13px;
  border:1px solid color-mix(in oklab,var(--v-signature) 32%,transparent);
  background:linear-gradient(90deg,color-mix(in oklab,var(--v-signature) 14%,transparent),transparent 70%); cursor:pointer; }
.imc.cs-slim .csi{ width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); }
.imc.cs-slim .csn{ font-family:var(--cn); font-weight:800; font-size:14.5px; color:var(--text); flex:none; }
.imc.cs-slim .cst{ font-family:var(--mono); font-size:11px; color:var(--text-mute); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.imc.cs-slim .unb{ flex:none; }
.imc.cs-slim.on{ border-color:var(--v-bright); }
.imemo-tabs{ display:flex; gap:6px; margin-bottom:9px; }
.imemo-tab{ border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--text-mute); font:700 11.5px var(--cn); padding:6px 13px; cursor:pointer; }
.imemo-tab.on{ color:#fff; background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); border-color:transparent; }

/* rail 顶部「消息」标识 + 新人气泡(2026-07-14:新人不知道左侧是聊天入口)*/
#dp-railhint{ position:absolute; left:calc(100% + 12px); top:8px; width:210px; padding:13px 15px; border-radius:14px; background:linear-gradient(165deg,var(--v-bright,#a78bfa),var(--v-deep,#7c4dff)); color:#fff; box-shadow:0 18px 44px -16px rgba(124,77,255,.7); z-index:9992; animation:railHintIn .3s cubic-bezier(.2,.9,.3,1.2); }
#dp-railhint::before{ content:""; position:absolute; left:-7px; top:20px; width:14px; height:14px; background:var(--v-bright,#a78bfa); transform:rotate(45deg); border-radius:3px; }
#dp-railhint b{ display:block; font-family:var(--cn); font-size:14px; font-weight:800; margin-bottom:4px; }
#dp-railhint span{ display:block; font-family:var(--cn); font-size:12px; line-height:1.55; opacity:.92; }
#dp-railhint .rh-x{ margin-top:10px; padding:6px 13px; border:0; border-radius:9px; background:rgba(255,255,255,.22); color:#fff; font-family:var(--cn); font-weight:800; font-size:12px; cursor:pointer; }
#dp-railhint .rh-x:hover{ background:rgba(255,255,255,.34); }
@keyframes railHintIn{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
@media(max-width:768px){ #dp-railhint{ display:none; } }

/* 头部信息列强制吃满(tag一行只排2个的保险丝;JS内联flex:1在个别环境未生效,原因待查) */
.imt-hd > div:not(.acts):not(.av){ flex:1 1 0%; min-width:0; }
.imt-tags{ width:100%; }

/* SS 等 VIP 徽章在会话头部被裁/被按钮盖住(2026-07-17):昵称行可换行不裁切,徽章不压缩并浮上层 */
.imt-hd .nm{ flex-wrap:wrap; overflow:visible; }
.imt-hd .nm .dp-tag{ flex:none; position:relative; z-index:3; }
.imt-hd > div{ min-width:0; overflow:visible; }


/* ===== 聊天区滚动条美化(2026-07-18 用户:默认滚动条太丑)===== */
.imt-msgs, .imc-convos, .imt-input .box textarea, .im-emopanel{ scrollbar-width:thin; scrollbar-color:color-mix(in oklab,var(--v-signature,#9d6bff) 45%,transparent) transparent; }
.imt-msgs::-webkit-scrollbar, .imc-convos::-webkit-scrollbar, .imt-input .box textarea::-webkit-scrollbar, .im-emopanel::-webkit-scrollbar{ width:6px; height:6px; }
.imt-msgs::-webkit-scrollbar-track, .imc-convos::-webkit-scrollbar-track, .imt-input .box textarea::-webkit-scrollbar-track, .im-emopanel::-webkit-scrollbar-track{ background:transparent; }
.imt-msgs::-webkit-scrollbar-thumb, .imc-convos::-webkit-scrollbar-thumb, .imt-input .box textarea::-webkit-scrollbar-thumb, .im-emopanel::-webkit-scrollbar-thumb{ background:color-mix(in oklab,var(--v-signature,#9d6bff) 38%,transparent); border-radius:99px; }
.imt-msgs::-webkit-scrollbar-thumb:hover, .imc-convos::-webkit-scrollbar-thumb:hover{ background:color-mix(in oklab,var(--v-signature,#9d6bff) 62%,transparent); }

/* ═══════════════════════════════════════════════════════════════════════════
   手机端版面收口(2026-07-25)
   本块所有规则锁在 @media(max-width:768px) 内,≥1024px 一条都不生效;
   断点与全站底栏 play-mbar.js 对齐(同一次改动里已把上面那条 760 也并过来了)。

   实测(无头 Chrome,375×812,登录态,4 条会话 + 5 条消息)诊断出的三件事:

   1) 视口高度取错 —— .imo 是 position:fixed + inset:0。fixed 元素在移动端按
      **layout viewport** 定高,而 layout viewport 等于「地址栏收起时」的高度。
      于是 iOS Safari 地址栏露出来的时候,面板底部那 ~60–90px(正好是输入行)
      被顶到可视区外面去了 —— 用户的表现就是「打不了字 / 发送键没了」。
      改用 100dvh:dvh 跟着地址栏伸缩走,输入行永远贴在真实可视区底边。
      (top/bottom/height 同时给值时 bottom 被忽略,所以不必去动 inset:0。)

   2) 没有安全区内边距 —— 实测 .imt-input 的 bottom 正好等于视口高度 812,
      也就是紧贴屏幕最底边。iPhone 的 home indicator 就压在发送键上。

   3) 触摸目标偏小 —— .imt-back 32×32、.imt-quick(收藏/派单/下冠名/送礼物)高 34、
      在线状态键高 30、列表头铃铛高 27,全部低于 44。

   顺带把头部/列表的内边距收一档:.imt-hd 原来吃掉 139px(375×812 屏的 17%),
   加上 69px 输入行,聊天区只剩 565px。收完 header 让出 ~20px 给消息区。
   注意收的只是留白和字号,标签行 / 动作键一个没删(两行都已经是横滑,滑得到)。
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* ── 1) 视口高度 ── */
  .imo{ height:100dvh; }
  /* 面板本身靠 top:0/bottom:0 撑,跟着 .imo 走即可,不用另外给高 */

  /* ── 2) 安全区 ──
     输入行和会话列表都要,不然最后一条消息/会话被 home indicator 压住。
     env() 在不支持的浏览器上取 0,等价于原样。 */
  .imt-input{ padding:11px 13px calc(11px + env(safe-area-inset-bottom)); gap:9px; }
  .imc-convos{ padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .imt-msgs{ padding:14px 13px; gap:10px; }

  /* ── 3) 触摸目标 ── */
  .imt-back{ width:40px; height:40px; }
  .imt-quick{ min-height:40px; padding:0 13px; font-size:12px; }
  .imc-stbtn{ min-height:36px; padding:0 12px; }
  .imc-hd button{ min-height:36px; }
  .imc-tab{ min-height:38px; padding:0 16px; display:inline-flex; align-items:center; }
  /* 输入框:抬到 44px 可点高。竖向 padding 不能直接归零 —— textarea 会长到 122px 多行,
     归零后文字贴着框边;留 6px 再靠 min-height 补足单行时的 44。 */
  .imt-input .box{ min-height:44px; padding:6px 14px; }
  .imt-input > button{ min-width:44px; min-height:44px; }

  /* ── 线程头部收一档 ──
     139px 里有 ~26px 是纯留白。字号只动到「够读」为止:名字 14px 不再往下压。 */
  .imt-hd{ padding:9px 11px; gap:9px; row-gap:6px; }
  .imt-hd .sub{ font-size:10px; margin-top:1px; }
  .imt-tags{ margin-top:4px; gap:4px; }
  .imt-tags .tg{ font-size:9px; padding:2px 6px; }

  /* ── 会话列表头部收一档(标题55 + tab61 + 搜索41 = 157px)──
     收到 ~140px,多露出小半条会话;搜索框仍是 44px 可点区。 */
  .imc-hd{ padding:10px 13px 0; }
  .imc-hd h2{ font-size:17px; }
  .imc-back{ width:38px; height:38px; }
  .imc-tabs{ padding:10px 13px 8px; gap:7px; }
  .imc-search{ margin:0 13px 8px; padding:0 12px; min-height:44px; }
  .imc{ padding:10px 9px; gap:10px; }
  .imc .av{ width:44px; height:44px; }

  /* ── 左侧头像坞 ──
     bottom:78px 是在 play-mbar(84px 高)之前定的,现在正好压在底栏上沿。
     抬到 96 + 安全区,和房间页那颗悬浮 BGM 钮同一条线。 */
  .im-rail{ bottom:calc(96px + env(safe-area-inset-bottom)); }

  /* 表情面板别顶出屏幕(输入行抬高后它的 bottom 基准跟着变) */
  .imt-emo{ max-height:min(290px,42dvh); }
}