/* ============================================================
   V3.16  聊天体验重构 / 夜间灰白根因修复 / 动画打磨
   作为 style.css + v315.css 之后的覆盖层（不改原文件，可回滚）
   ============================================================ */

/* 1) 根因修复：全局从未定义 --card，夜间聊天列表/气泡/输入栏
      全部回落到 var(--card, 白色兜底) 而呈灰白色。此处显式补齐。 */
:root{ --card:rgba(255,255,255,.94); }
body[data-theme="dark"]{ --card:rgba(44,44,50,.94); }

/* ---------- 会话列表：搜索框 ---------- */
.conv-search{ position:relative; display:flex; align-items:center; padding:10px 12px 8px; color:var(--text-3); }
.conv-search svg{ position:absolute; left:24px; top:50%; transform:translateY(-6px); opacity:.6; pointer-events:none; }
.conv-search input{ width:100%; height:36px; border-radius:11px; border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--text); padding:0 30px 0 33px; font-size:13px; font-family:inherit; transition:.16s; }
.conv-search input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent); }
.conv-kw-clear{ position:absolute; right:20px; top:50%; transform:translateY(-6px); width:20px; height:20px; border-radius:50%;
  border:none; background:var(--track); color:var(--text-2); cursor:pointer; font-size:10px; line-height:1; display:flex; align-items:center; justify-content:center; }
.conv-kw-clear:hover{ background:var(--blue); color:#fff; }
.kw-hl{ background:color-mix(in srgb,#FFD60A 62%,transparent); color:inherit; border-radius:4px; padding:0 1px; }
body[data-theme="dark"] .kw-hl{ background:color-mix(in srgb,#FFD60A 38%,transparent); color:#fff; }

/* ---------- 会话列表项：名称+时间一行，摘要+未读一行 ---------- */
.conv-item{ gap:11px; padding:11px 14px; }
.conv-item::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#0A84FF,#5E5CE6);
  transform:scaleY(0); transition:transform .2s ease; border-radius:0 3px 3px 0; }
.conv-item.active::before{ transform:scaleY(1); }
.conv-ava{ width:44px; height:44px; font-size:16px; box-shadow:0 3px 10px rgba(10,132,255,.22); }
.conv-name-row{ display:flex; align-items:center; gap:6px; }
.conv-name-row .conv-name{ flex:1; min-width:0; }
.conv-time{ font-size:10.5px; color:var(--text-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
.conv-last-row{ display:flex; align-items:center; gap:8px; margin-top:3px; }
.conv-last-row .conv-last{ flex:1; min-width:0; }
.conv-unread{ box-shadow:0 2px 8px rgba(255,69,58,.4); animation:badgePop .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes badgePop{ from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }

/* ---------- 聊天顶栏：记录搜索按钮 ---------- */
.chat-top-btn{ width:36px; height:36px; border-radius:11px; border:1px solid var(--input-border); background:var(--input-bg);
  color:var(--text-2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.18s; flex-shrink:0; }
.chat-top-btn:hover{ color:var(--blue); border-color:var(--blue); transform:translateY(-1px); box-shadow:0 4px 12px color-mix(in srgb,var(--blue) 22%,transparent); }
.chat-top-btn:active{ transform:scale(.92); }

/* ---------- 会话内消息搜索条 ---------- */
.msg-search-bar{ display:none; align-items:center; gap:6px; padding:8px 14px; border-bottom:1px solid var(--input-border);
  background:color-mix(in srgb,var(--blue) 7%,transparent); }
.msg-search-bar.show{ display:flex; animation:barDown .22s ease; }
@keyframes barDown{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.msg-search-bar input{ flex:1; height:34px; min-height:34px; width:auto; border-radius:10px; border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--text); padding:0 12px; font-size:13px; font-family:inherit; }
.msg-search-bar input:focus{ outline:none; border-color:var(--blue); }
.msg-search-bar .btn-sm{ height:32px; min-height:32px; padding:0 10px; width:auto; }
.ms-count{ font-size:12px; color:var(--text-3); min-width:44px; text-align:center; font-variant-numeric:tabular-nums; }
.msg-row.msg-hit .msg-bubble{ box-shadow:0 0 0 2px color-mix(in srgb,#FFD60A 55%,transparent); }
.msg-row.msg-hit-cur .msg-bubble{ box-shadow:0 0 0 2px #FFD60A,0 4px 16px rgba(255,214,10,.35); }

/* ---------- 输入工具栏（纯图标，统一玻璃风） ---------- */
.chat-toolbar{ position:relative; display:flex; gap:7px; margin-bottom:8px; }
.chat-tool{ width:38px; height:34px; border-radius:11px; border:1px solid var(--input-border); background:var(--input-bg);
  color:var(--text-2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .16s ease,color .16s,border-color .16s,box-shadow .16s; padding:0; }
.chat-tool:hover{ color:var(--blue); border-color:var(--blue); transform:translateY(-1px); box-shadow:0 4px 12px color-mix(in srgb,var(--blue) 20%,transparent); }
.chat-tool:active{ transform:scale(.9); }

/* ---------- 表情面板：搜索 + 分类 + 网格 ---------- */
.emoji-panel{ position:absolute; left:0; bottom:46px; width:344px; max-width:88vw; height:308px; display:flex; flex-direction:column;
  padding:0; border-radius:20px; overflow:hidden; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.97); transform-origin:bottom left;
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,1.2,.3,1),visibility .18s; pointer-events:none; }
.emoji-panel.show{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.emoji-head{ padding:11px 11px 7px; }
.emoji-head input{ width:100%; height:34px; min-height:34px; border-radius:10px; border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--text); padding:0 12px; font-size:13px; font-family:inherit; }
.emoji-head input:focus{ outline:none; border-color:var(--blue); }
.emoji-tabs{ display:flex; gap:4px; padding:0 11px 8px; overflow-x:auto; }
.emoji-tab{ border:none; background:transparent; color:var(--text-3); font-size:12.5px; padding:5px 10px; border-radius:9px;
  cursor:pointer; white-space:nowrap; transition:.14s; font-family:inherit; }
.emoji-tab:hover{ color:var(--text); background:var(--hover); }
.emoji-tab.on{ background:color-mix(in srgb,var(--blue) 17%,transparent); color:var(--blue); font-weight:700; }
.emoji-grid{ flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:2px 11px 11px; align-content:start; }
.emoji-item{ border:none; background:transparent; font-size:21px; height:37px; border-radius:10px; cursor:pointer; transition:transform .1s,background .12s; line-height:1; }
.emoji-item:hover{ background:color-mix(in srgb,var(--blue) 16%,transparent); transform:scale(1.22); }
.emoji-item:active{ transform:scale(.9); }
.emoji-empty{ grid-column:1/-1; text-align:center; color:var(--text-3); font-size:13px; padding:26px 0; }

/* ---------- 消息入场动画 ---------- */
@keyframes msgIn{ from{opacity:0; transform:translateY(10px) scale(.985);} to{opacity:1; transform:none;} }
.msg-row{ animation:msgIn .26s cubic-bezier(.2,.8,.3,1) both; }
.msg-bubble{ transition:box-shadow .2s ease; }

/* ---------- 夜间：聊天区精修（--card 已兜底，这里补对比与边框） ---------- */
body[data-theme="dark"] .conv-col{ background:rgba(18,18,22,.55); }
body[data-theme="dark"] .msg-bubble{ background:rgba(50,50,56,.96); border-color:rgba(255,255,255,.1); }
body[data-theme="dark"] .msg-file,
body[data-theme="dark"] .msg-product,
body[data-theme="dark"] .msg-products{ background:rgba(50,50,56,.96); border-color:rgba(255,255,255,.1); color:var(--text); }
body[data-theme="dark"] .mp-noimg{ background:color-mix(in srgb,var(--blue) 22%,transparent); }
body[data-theme="dark"] .chat-compose{ background:rgba(18,18,22,.55); }
body[data-theme="dark"] .emoji-panel{ box-shadow:0 18px 50px rgba(0,0,0,.6),var(--glass-edge); }

/* 输入类控件在聊天区统一不发白 */
#chatInput, .conv-search input, .emoji-head input, .msg-search-bar input{ color-scheme:light; }
body[data-theme="dark"] #chatInput,
body[data-theme="dark"] .conv-search input,
body[data-theme="dark"] .emoji-head input,
body[data-theme="dark"] .msg-search-bar input{ color-scheme:dark; }
#chatInput::placeholder{ color:var(--text-3); }

/* 会话/聊天切换淡入 */
.chat-pane{ animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* ---------- 手机端 ---------- */
@media (max-width:760px){
  .emoji-panel{ width:min(92vw,344px); height:280px; }
  .conv-search{ padding:8px 10px 6px; }
  .chat-toolbar{ gap:5px; }
  .ms-count{ min-width:36px; }
}

/* ---------- 全局细节：弹窗内容滚动顺滑、按钮按压反馈 ---------- */
.modal-body, .pop-body{ scroll-behavior:smooth; }
.btn:active, .icon-btn:active{ transform:scale(.96); }
.btn, .icon-btn{ transition:transform .14s ease,box-shadow .18s ease,background .18s,border-color .18s,color .18s; }

@media (prefers-reduced-motion:reduce){
  .msg-row,.conv-unread,.msg-search-bar.show,.chat-pane,.emoji-panel{ animation:none!important; transition:none!important; }
}