/* ═══════ 聊天室容器 ═══════ */
.zm-chatroom{border:1px solid #e8e8e8;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.06);margin:16px 0;position:relative;font-size:14px}

/* 登录提示 */
.zm-chat-login-notice{display:flex;gap:14px;align-items:center;padding:24px;justify-content:center}
.zm-chat-login-icon{font-size:32px}
.zm-chat-login-title{font-size:15px;font-weight:600;color:#333;margin-bottom:8px}
.zm-chat-login-btn{display:inline-block;background:linear-gradient(135deg,#425AEF,#6C5CE7);color:#fff!important;text-decoration:none!important;padding:7px 18px;border-radius:8px;font-size:13px;transition:.2s}
.zm-chat-login-btn:hover{opacity:.9;transform:scale(1.02)}

/* 头部 */
.zm-chat-header{padding:12px 16px;background:linear-gradient(135deg,#425AEF,#6C5CE7);color:#fff;display:flex;align-items:center;gap:10px}
.zm-chat-badge{background:rgba(255,255,255,.18);padding:4px 12px;border-radius:10px;font-size:13px;font-weight:500}
.zm-chat-online{font-size:12px;opacity:.8}

/* ═══════ 消息区域 ═══════ */
.zm-chat-messages{padding:12px;background:#f5f6f8;overflow-y:auto;position:relative}
.zm-chat-messages::-webkit-scrollbar{width:5px}
.zm-chat-messages::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}

/* 历史加载 */
.zm-chat-history{text-align:center;padding:8px 0}
.zm-chat-load-history{background:none;border:1px dashed #ccc;color:#888;padding:5px 16px;border-radius:16px;cursor:pointer;font-size:12px;transition:.2s}
.zm-chat-load-history:hover{border-color:#425AEF;color:#425AEF}
.zm-chat-load-history[disabled]{opacity:.4;cursor:default}

/* 新消息提示栏 */
.zm-chat-newbar{position:sticky;bottom:0;left:0;right:0;background:rgba(66,90,239,.92);color:#fff;padding:6px 16px;display:flex;align-items:center;justify-content:space-between;font-size:13px;z-index:10;border-radius:0 0 0 0}
.zm-chat-newbar[hidden]{display:none}
.zm-chat-newbar-jump{background:rgba(255,255,255,.25);border:none;color:#fff;padding:3px 10px;border-radius:6px;cursor:pointer;font-size:12px}

/* ═══════ 单条消息 ═══════ */
.zm-chat-msg{display:flex;gap:8px;margin-bottom:12px;animation:zm-msg-in .25s ease}
@keyframes zm-msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.zm-chat-msg .msg-avatar{flex-shrink:0;cursor:pointer}
.zm-chat-msg .msg-avatar img{width:36px;height:36px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.08);object-fit:cover}
.zm-chat-msg .msg-avatar-text{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.08);color:#fff;font-size:15px;font-weight:600}
.zm-chat-msg .msg-body{flex:1;min-width:0}
.zm-chat-msg .msg-name{font-size:12px;font-weight:600;color:#555;margin-bottom:2px}
.zm-chat-msg .msg-time{font-weight:400;color:#aaa;margin-left:6px;font-size:11px}
.zm-chat-msg .msg-text{background:#fff;padding:8px 12px;border-radius:2px 12px 12px 12px;font-size:14px;line-height:1.6;color:#333;display:inline-block;max-width:85%;word-break:break-word;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.zm-chat-msg .msg-del{font-size:11px;color:#ccc;cursor:pointer;margin-left:6px;opacity:0;transition:.2s}
.zm-chat-msg:hover .msg-del{opacity:1}
.zm-chat-msg .msg-del:hover{color:#e74c3c}

/* 自己的消息 */
.zm-chat-msg.is-self{flex-direction:row-reverse}
.zm-chat-msg.is-self .msg-body{text-align:right}
.zm-chat-msg.is-self .msg-text{background:linear-gradient(135deg,#425AEF,#6C5CE7);color:#fff;border-radius:12px 2px 12px 12px;box-shadow:0 2px 8px rgba(66,90,239,.2)}
.zm-chat-msg.is-self .msg-name{text-align:right}

/* 系统消息 */
.zm-chat-msg.is-system{justify-content:center;margin:6px 0}
.zm-chat-msg.is-system .msg-system-text{font-size:12px;color:#999;background:#eef0f2;padding:3px 12px;border-radius:10px;display:inline-block}

/* 撤回消息 */
.zm-chat-msg.is-retracted .msg-text{background:#f0f0f0!important;color:#999!important;font-style:italic}

/* @提及高亮 */
.zm-mention-tag{color:#425AEF;font-weight:500;cursor:pointer}
.zm-mention-tag:hover{text-decoration:underline}

/* 引用块 */
.zm-quote-block{background:#f0f2f5;border-left:3px solid #425AEF;border-radius:0 6px 6px 0;padding:6px 10px;margin-bottom:6px;font-size:12px;color:#666;cursor:pointer;max-width:85%;display:inline-block}
.zm-quote-block .zm-quote-name{font-weight:600;color:#555;margin-bottom:1px}
.zm-quote-block .zm-quote-body{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}

/* 表情 */
.zm-chat-msg .msg-text .smilie-icon{height:24px;width:auto;vertical-align:middle;margin:0 1px}

/* ═══════ 输入区域 ═══════ */
.zm-chat-form-wrap{border-top:1px solid #eee;background:#fff}
.zm-chat-form-wrap.is-hidden{display:none}
.zm-chat-form{padding:10px 12px}
.zm-chat-textarea{width:100%;border:1px solid #e0e0e0;border-radius:10px;padding:8px 12px;font-size:14px;resize:none;outline:none;transition:border .2s;font-family:inherit;box-sizing:border-box}
.zm-chat-textarea:focus{border-color:#425AEF}
.zm-chat-form-actions{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.zm-chat-tools{display:flex;gap:6px}
.zm-chat-send{padding:7px 22px;border:none;border-radius:10px;background:linear-gradient(135deg,#425AEF,#6C5CE7);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:.2s;white-space:nowrap}
.zm-chat-send:hover{box-shadow:0 3px 10px rgba(66,90,239,.3);transform:translateY(-1px)}
.zm-chat-send:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}

/* 引用预览条 */
.zm-chat-quote-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:#f0f2f5;border-top:1px solid #eee;font-size:12px;color:#666}
.zm-chat-quote-bar[hidden]{display:none}
.zm-quote-bar-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zm-quote-bar-close{background:none;border:none;font-size:14px;color:#999;cursor:pointer;padding:0 4px}

/* 关闭 / 禁言 */
.zm-chat-closed-bar{text-align:center;padding:12px;background:#fff5f5;color:#c0392b;font-size:13px;border-top:1px solid #f5c6cb}
.zm-chat-muted-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff3cd;border-top:1px solid #ffc107;font-size:13px;color:#856404}
.zm-chat-muted-bar[hidden]{display:none}

/* ═══════ 右键菜单 ═══════ */
.zm-chat-ctx{position:fixed;background:#fff;border:1px solid #e0e0e0;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.12);padding:6px 0;z-index:99999;min-width:120px}
.zm-chat-ctx[hidden]{display:none}
.zm-chat-ctx button,.zm-chat-ctx a{display:block;width:100%;text-align:left;padding:8px 16px;background:none;border:none;font-size:13px;color:#333;cursor:pointer;text-decoration:none;box-sizing:border-box}
.zm-chat-ctx button:hover,.zm-chat-ctx a:hover{background:#f0f2f5;color:#425AEF}
.zm-chat-ctx .zm-ctx-mute,.zm-chat-ctx .zm-ctx-unmute{color:#e74c3c}

/* ═══════ 空状态 ═══════ */
.zm-chat-empty{text-align:center;padding:40px 20px;color:#bbb;font-size:13px}

/* ═══════ 悬浮聊天弹窗 ═══════ */
.zm-chat-float-panel{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:hidden}
.zm-chat-float-panel.is-open{pointer-events:auto;visibility:visible}

/* 遮罩 */
.zm-chat-float-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .3s}
.zm-chat-float-panel.is-open .zm-chat-float-overlay{opacity:1}

/* 弹窗主体 */
.zm-chat-float-body{position:relative;width:420px;max-width:92vw;height:600px;max-height:85vh;background:#fff;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);transform:scale(.9) translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.zm-chat-float-panel.is-open .zm-chat-float-body{transform:scale(1) translateY(0);opacity:1}

/* 弹窗头部 */
.zm-chat-float-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(135deg,#425AEF,#6C5CE7);color:#fff;font-size:15px;font-weight:600;flex-shrink:0}
.zm-chat-float-head .zm-chat-float-close{background:rgba(255,255,255,.2);border:none;color:#fff;width:28px;height:28px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;line-height:1}
.zm-chat-float-head .zm-chat-float-close:hover{background:rgba(255,255,255,.35)}

/* 弹窗内chatroom覆写 */
.zm-chat-float-body .zm-chatroom{flex:1;display:flex;flex-direction:column;border:none;border-radius:0;margin:0;box-shadow:none;overflow:hidden}
.zm-chat-float-body .zm-chat-header{display:none}
.zm-chat-float-body .zm-chat-messages{flex:1;height:auto!important}
.zm-chat-float-body .zm-chat-form-wrap{flex-shrink:0}

/* 悬浮按钮未读圆点 */
.zm-chat-float-btn{position:relative}
.zm-chat-float-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;background:#ea5455;border-radius:50%;display:none}
.zm-chat-float-dot.is-active{display:block;animation:zm-dot-pulse 1.5s ease infinite}
@keyframes zm-dot-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ═══════ 聊天图片消息 ═══════ */
.zm-chat-img-link{display:block;max-width:220px;margin:4px 0;border-radius:8px;transition:opacity .2s}
.zm-chat-img-link:hover{opacity:.85}
.zm-chat-img{max-width:100%;height:auto;border-radius:8px;display:block}
.zm-chat-img-link.is-error{background:#f5f5f5;padding:8px 12px;border:1px dashed #ddd;border-radius:8px;font-size:12px;color:#999}
.zm-chat-img-link.is-error img{display:none}
.zm-chat-msg.is-self .msg-text .zm-chat-img-link{margin-left:auto}

/* ═══════ 输入扩展按钮（图片/快捷回复）在聊天室内的适配 ═══════ */
.zm-chat-tools .dropup .dropdown-menu{bottom:100%;top:auto;left:0;min-width:200px;max-width:320px;margin-bottom:6px;z-index:100}
.zm-chat-tools .dropup .dropdown-menu .dropdown-smilie{max-height:160px}
.zm-chat-tools .dropup .dropdown-menu .dropdown-image textarea{font-size:13px}
.zm-chat-tools .dropup .dropdown-quick-often .quick-often-box{max-height:200px}
.zm-chat-tools .dropup .dropdown-quick-often .quick-reply-item{font-size:13px;padding:8px 12px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background .15s}
.zm-chat-tools .dropup .dropdown-quick-often .quick-reply-item:hover{background:#f5f6f8}

/* 悬浮面板内下拉方向修正 */
.zm-chat-float-body .zm-chat-tools .dropup .dropdown-menu{max-width:380px}

/* 移动端 */
@media(max-width:480px){.zm-chat-float-body{width:100vw;height:100vh;max-width:100vw;max-height:100vh;border-radius:0}
.zm-chat-tools .dropup .dropdown-menu{left:-10px;right:-10px;min-width:auto;max-width:none}}