/* ======================================================================
 * 私信面板（会话列表 + 聊天窗口）
 *
 * 原来这段样式内联在 messages.html 里，现在通知中心也要用同一套面板，
 * 抽成公共文件，两边 <link> 同一份，改一次两边都变。
 * ====================================================================== */

/* ---------------- 整体：左边会话列表 + 右边聊天窗口 ---------------- */
/*
 * --dm-w / --dm-h 由 JS 拖拽时写进来（并记在 localStorage），没拖过就用默认值。
 * 用 left:50% + translateX(-50%) 居中，是为了拖宽时能对称地"撑出" .container，
 * 不会只往右边溢出。max-width 兜底，保证永远不出屏。
 */
.dm-wrap{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  margin-top:24px;
  display:flex;
  width:var(--dm-w, 100%);
  max-width:calc(100vw - 2 * var(--pad-x) - 20px);
  max-width:calc(100dvw - 2 * var(--pad-x) - 20px);
  height:var(--dm-h, clamp(420px, calc(100vh - 240px), 720px));
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--card-bg);
}

/* ---------------- 拖拽改大小的手柄（桌面端） ---------------- */
.dm-rz{
  position:absolute; z-index:6;
  background:transparent;
  touch-action:none;                  /* 按住手柄时不要滚页面 */
  -webkit-user-select:none; user-select:none;
}
.dm-rz::after{
  content:''; position:absolute; inset:0;
  background:var(--green); opacity:0; transition:opacity .15s ease;
}
.dm-rz:hover::after, .dm-rz:focus-visible::after, .dm-rz.on::after{ opacity:.28; }

.dm-rz-e{ top:0; right:0; width:8px; height:100%; cursor:ew-resize; }
.dm-rz-s{ left:0; bottom:0; width:100%; height:8px; cursor:ns-resize; }
.dm-rz-se{ right:0; bottom:0; width:18px; height:18px; cursor:nwse-resize; }
/* 右下角那个小直角，提示这里能拖 */
.dm-rz-se::before{
  content:''; position:absolute; right:4px; bottom:4px;
  width:8px; height:8px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  border-bottom-right-radius:2px; opacity:.6;
}

/* 拖拽中：统一光标、禁止选中文字 */
body.dm-resizing{ cursor:nwse-resize; }
body.dm-resizing[data-rz="e"]{ cursor:ew-resize; }
body.dm-resizing[data-rz="s"]{ cursor:ns-resize; }
body.dm-resizing *{ cursor:inherit !important; user-select:none !important; }

/* 全屏开关：只有手机端出现 */
.dm-fs-btn{
  display:none;
  margin-left:auto;
  width:30px; height:30px; flex:0 0 auto;
  align-items:center; justify-content:center;
  padding:0; border:1px solid var(--line); border-radius:9px;
  background:transparent; color:var(--muted); cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.dm-fs-btn:hover{ color:var(--green); border-color:var(--green); }
.dm-fs-btn svg{ width:15px; height:15px; display:block; }

/* ---------------- 左侧：会话列表 ---------------- */
.dm-side{
  flex:0 0 min(300px, 42%);           /* 面板拖窄时会话列表也让一让 */
  border-right:1px solid var(--line);
  overflow-y:auto;
  background:transparent;
}
.dm-side-title{
  display:flex; align-items:center; gap:8px;
  margin:0; padding:16px 18px 10px;
  font-size:13px; font-weight:700; color:var(--muted);
  letter-spacing:.08em;
}

.dm-row{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;
  cursor:pointer;
  border-left:3px solid transparent;
  transition:background .15s ease;
}
.dm-row:hover{ background:var(--chip-bg); }
.dm-row.active{ background:var(--chip-bg); border-left-color:var(--green); }

.dm-row-mid{ min-width:0; flex:1; }
.dm-row-name{
  font-size:14px; font-weight:600; color:var(--ink-strong);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dm-row-preview{
  margin-top:2px; font-size:12px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.dm-row-right{
  flex:0 0 auto; display:flex; flex-direction:column;
  align-items:flex-end; gap:6px;
}
.dm-row-time{ font-size:11px; color:var(--muted); white-space:nowrap; }

/* 未读小红点：和微信一样，超过 99 显示 99+ */
.dm-badge{
  min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:#f43c2f; color:#fff;
  font-size:11px; font-weight:700; line-height:1;
}

/* ---------------- 右侧：聊天窗口 ---------------- */
.dm-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.dm-ph{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  color:var(--muted); font-size:14px;
}
.dm-ph b{ color:var(--ink-strong); font-size:15px; font-weight:700; }
body.dm-chat-open .dm-ph{ display:none; }

.dm-head{
  display:flex; align-items:baseline; gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.dm-head-name{ font-size:16px; font-weight:700; color:var(--ink-strong); }
.dm-head-sub{ font-size:12px; color:var(--muted); }

.dm-back{
  display:none;
  margin-right:2px; padding:2px 8px;
  border:1px solid var(--line); border-radius:8px;
  background:transparent; color:var(--muted);
  font-size:13px; cursor:pointer;
}

.dm-body{
  flex:1; overflow-y:auto;
  padding:18px 18px 8px;
  display:flex; flex-direction:column; gap:12px;
  background:rgba(127,127,127,.045);
}

.dm-time{ align-self:center; font-size:11px; color:var(--muted); margin:2px 0; }

.dm-msg{ display:flex; align-items:flex-end; gap:8px; max-width:100%; }
.dm-msg.mine{ flex-direction:row-reverse; }

.dm-bubble{
  max-width:min(72%, 460px);
  padding:9px 13px;
  border-radius:14px;
  font-size:14px; line-height:1.65;
  white-space:pre-wrap;          /* 保留用户敲的换行 */
  word-break:break-word;
  border:1px solid var(--line);
  background:var(--card-bg);
  color:var(--ink-strong);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  animation:bubbleIn .28s cubic-bezier(.22,1.2,.36,1);
}
/* 自己发的：绿色实心底、右下角尖一点，像微信气泡的小尾巴 */
.dm-msg.mine .dm-bubble{
  background:linear-gradient(135deg,#35c257,var(--green));
  border-color:transparent;
  color:#fff;
  border-bottom-right-radius:5px;
  box-shadow:0 2px 8px rgba(46,160,67,.22);
}
.dm-msg:not(.mine) .dm-bubble{ border-bottom-left-radius:5px; }

@keyframes bubbleIn{
  from{ opacity:0; transform:translateY(6px) scale(.97); }
  to  { opacity:1; transform:none; }
}

/* ---------------- 输入区 ---------------- */
.dm-bar{
  border-top:1px solid var(--line);
  padding:12px 14px;
  display:flex; align-items:flex-end; gap:10px;
}
.dm-input{
  flex:1; min-height:40px; max-height:108px;
  padding:10px 12px;
  border:1px solid var(--line); border-radius:10px;
  background:transparent; color:var(--ink);
  font:inherit; font-size:14px; line-height:1.5;
  resize:none; overflow-y:auto;
}
.dm-input:focus{ outline:2px solid var(--green); outline-offset:1px; border-color:var(--green); }

.dm-send{
  flex:0 0 auto; height:40px; padding:0 20px;
  border:none; border-radius:10px;
  background:var(--green); color:#fff;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:filter .15s ease, transform .15s ease;
}
.dm-send:hover:not(:disabled){ filter:brightness(1.06); transform:translateY(-1px); }
.dm-send:active:not(:disabled){ transform:scale(.96); }
.dm-send:disabled{ opacity:.5; cursor:not-allowed; }

.dm-empty{ margin:0; font-size:14px; color:var(--muted); line-height:1.8; }
.dm-empty.dm-hint{ text-align:center; font-size:12px; padding-bottom:6px; }

.dm-err{
  margin:12px 0 0; font-size:14px; color:#d93025; line-height:1.6;
}

/* ---------------- 窄屏：单栏，点进去才显示聊天 ---------------- */
@media (max-width:700px){
  .dm-wrap{ height:calc(100vh - 200px); min-height:380px; }
  .dm-side{ flex:1 1 auto; border-right:none; }
  .dm-main{ display:none; }
  body.dm-chat-open .dm-side{ display:none; }
  body.dm-chat-open .dm-main{ display:flex; }
  .dm-back{ display:inline-block; }
  .dm-head{ align-items:center; gap:6px; }
  .dm-head-sub{ font-size:11px; }
  .dm-bubble{ max-width:78%; }

  /* 手机上屏幕就这么大，拖手柄没意义，直接占满全屏 */
  .dm-rz{ display:none; }
  .dm-fs-btn{ display:inline-flex; }

  body.dm-fs .dm-wrap{
    position:fixed; inset:0;
    left:0; transform:none;
    width:100vw;  width:100dvw;
    height:100vh; height:100dvh;
    max-width:none; max-height:none;
    margin:0; border:0; border-radius:0;
    z-index:80;
  }
  /* 避开刘海 / 底部横条 */
  body.dm-fs .dm-side-title{ padding-top:calc(16px + env(safe-area-inset-top, 0px)); }
  body.dm-fs .dm-head{ padding-top:calc(14px + env(safe-area-inset-top, 0px)); }
  body.dm-fs .dm-bar{ padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }

  /* 全屏时锁住背景，别让页面在后面跟着滚 */
  html.dm-fs, html.dm-fs body{ overflow:hidden; }
}

@media (prefers-reduced-motion: reduce){
  .dm-bubble{ animation:none; }
  .dm-send{ transition:none; }
  .dm-send:hover:not(:disabled), .dm-send:active:not(:disabled){ transform:none; }
}