/* ============================================================
   V3.18  消息撤回 / QQ表情内联插入 / 最近使用 / 会议展示退出 / 弹窗体验
   ============================================================ */

/* ---------- 富文本聊天输入框（替代 textarea） ---------- */
#chatInput.chat-input-editable{
  flex:1; min-height:52px; max-height:160px; overflow-y:auto;
  padding:12px 14px; border-radius:16px; line-height:1.6; font-size:14.5px;
  border:1px solid var(--input-border); background:var(--input-bg); color:var(--text);
  outline:none; white-space:pre-wrap; word-break:break-word; resize:none;
  transition:border-color .2s, box-shadow .2s;
}
#chatInput.chat-input-editable:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent);
}
#chatInput.chat-input-editable:empty::before{
  content:attr(data-placeholder); color:var(--text-3); pointer-events:none;
}
/* 输入框内正在编辑的 QQ 表情：与文字同高 */
.ce-emoji{ width:1.32em; height:1.32em; object-fit:contain; vertical-align:-0.3em; margin:0 1px; }
/* 已发送消息里的行内小表情，随字号缩放 */
.inline-emoji{ width:1.28em; height:1.28em; object-fit:contain; vertical-align:-0.28em; margin:0 1px; display:inline-block; }

/* ---------- 表情面板加大 ---------- */
.emoji-panel{ width:408px; height:400px; max-height:min(420px,54vh); border-radius:18px; }
.emoji-grid{ scrollbar-width:thin; }
.emoji-grid.qq{ grid-template-columns:repeat(8,1fr); }
.emoji-grid.lottie{ grid-template-columns:repeat(3,1fr); }

/* ---------- 最近使用 ---------- */
.emoji-recent{ display:flex; align-items:center; gap:8px; padding:7px 10px 6px;
  border-bottom:1px solid var(--input-border); margin:0 2px 4px; flex:none; }
.er-title{ font-size:11px; color:var(--text-3); flex:none; letter-spacing:.5px; }
.er-list{ display:flex; gap:2px; overflow-x:auto; flex:1; scrollbar-width:thin; padding-bottom:2px; }
.er-list::-webkit-scrollbar{ height:4px; }
.er-qq,.er-uni{ flex:none; width:30px; height:30px; border:none; background:transparent;
  border-radius:8px; cursor:pointer; font-size:19px; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:2px;
  transition:background .15s, transform .12s; }
.er-qq img{ width:100%; height:100%; object-fit:contain; }
.er-qq:hover,.er-uni:hover{ background:color-mix(in srgb,var(--blue) 14%,transparent); transform:scale(1.12); }
.er-qq:active,.er-uni:active{ transform:scale(.88); }

/* ---------- 消息撤回 ---------- */
.msg-bubble-wrap{ position:relative; display:flex; align-items:center; gap:6px; max-width:78%; }
.msg-row.mine .msg-bubble-wrap{ flex-direction:row-reverse; }
.msg-bubble-wrap .msg-bubble{ max-width:100%; }
.msg-recall-btn{ opacity:0; flex:none; border:1px solid var(--input-border); background:var(--card);
  color:var(--text-2); font-size:11px; padding:3px 9px; border-radius:9px; cursor:pointer;
  white-space:nowrap; transition:opacity .18s, color .18s, transform .15s, background .2s;
  box-shadow:0 2px 10px rgba(0,0,0,.12); }
.msg-row:hover .msg-recall-btn{ opacity:1; }
.msg-recall-btn:hover{ color:#FF453A; border-color:#FF453A; }
.msg-recall-btn:active{ transform:scale(.9); }
.msg-recall-row{ justify-content:center !important; }
.msg-recalled{ font-size:12px; color:var(--text-3); background:var(--input-bg);
  padding:4px 14px; border-radius:11px; font-style:italic; }

/* ---------- 会议动画展示：退出按钮（点外部不再关闭） ---------- */
.sc-exit-btn{ position:absolute; top:14px; right:20px; z-index:6;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff;
  padding:6px 15px; border-radius:20px; cursor:pointer; font-size:13px; letter-spacing:.5px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .2s, transform .15s, border-color .2s; }
.sc-exit-btn:hover{ background:rgba(255,69,58,.9); border-color:transparent; }
.sc-exit-btn:active{ transform:scale(.93); }

/* ---------- 全局弹窗 / 按钮手感打磨 ---------- */
.modal-mask.show .modal.pop-in{ animation:v318Pop .34s cubic-bezier(.22,1.1,.36,1); }
@keyframes v318Pop{ 0%{ transform:scale(.9) translateY(16px); opacity:0; }
  60%{ transform:scale(1.012) translateY(-2px); opacity:1; }
  100%{ transform:scale(1) translateY(0); opacity:1; } }
.modal{ will-change:transform; }
.btn{ transition:transform .13s, box-shadow .2s, background .2s, border-color .2s, opacity .2s; }
.btn:active{ transform:scale(.95); }
.icon-btn:active{ transform:scale(.85); }
.modal input:focus,.modal textarea:focus,.modal select:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent);
}
/* 大表情消息尺寸 */
.msg-lottie{ width:128px; height:128px; }
.msg-sticker{ width:96px; height:96px; object-fit:contain; }

/* ---------- 手机端 ---------- */
@media(max-width:640px){
  .emoji-panel{ width:min(94vw,412px); height:348px; bottom:52px; }
  .emoji-grid.qq{ grid-template-columns:repeat(6,1fr); }
  .sc-exit-btn{ top:10px; right:12px; padding:5px 12px; font-size:12px; }
  .msg-bubble-wrap{ max-width:88%; }
}