/* ============ 功能扩展样式（消息 / 欢迎弹窗 / 聊天操作） ============ */

/* 顶部导航未读红点 */
.nav-badge{
  display:inline-block;
  min-width:16px;height:16px;line-height:16px;
  padding:0 4px;margin-left:3px;
  background:#e74c3c;color:#fff;
  font-size:11px;text-align:center;border-radius:10px;
  vertical-align:middle;
}

/* ============ 聊天室消息操作（私聊 / 加好友） ============ */
.chat-actions{ margin-top:6px; display:flex; gap:8px; }
.chat-act{
  font-size:12px;line-height:1;
  padding:4px 10px;border-radius:14px;
  border:1px solid var(--primary);color:var(--primary);
  background:#fff;cursor:pointer;text-decoration:none;
  transition:all .2s;
}
.chat-act:hover{ background:var(--primary);color:#fff; }

/* ============ 消息页（好友 + 私聊） ============ */
.msg-layout{ display:flex; gap:18px; padding:0; overflow:hidden; }
.msg-side{
  width:240px;flex:0 0 240px;
  border-right:1px solid var(--border);
  padding:16px;display:flex;flex-direction:column;
}
.msg-add{ display:flex;gap:8px;margin-bottom:10px; }
.msg-add input{ margin-bottom:0;flex:1;min-width:0; }
.msg-add .btn{ padding:8px 14px;font-size:13px;white-space:nowrap; }
.msg-flash{ font-size:13px;color:var(--primary);margin:0 0 8px; }
.msg-friends{ flex:1;overflow-y:auto; }
.msg-empty,.msg-pick{ color:var(--muted);font-size:13px;text-align:center;padding:30px 10px; }
.msg-friend{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 8px;border-radius:8px;gap:6px;
}
.msg-friend:hover{ background:var(--bg); }
.msg-friend.active{ background:var(--bg); }
.msg-friend-link{
  display:flex;align-items:center;flex:1;min-width:0;
  color:var(--text);text-decoration:none;font-size:14px;
}
.msg-friend-link:hover{ color:var(--primary); }
.msg-friend-av{
  width:28px;height:28px;border-radius:50%;flex:0 0 28px;margin-right:8px;
  object-fit:cover;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.msg-friend-name{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.msg-unread{
  flex:0 0 auto;min-width:18px;height:18px;line-height:18px;padding:0 5px;
  background:#e74c3c;color:#fff;font-size:11px;text-align:center;border-radius:10px;
}

.msg-main{ flex:1;display:flex;flex-direction:column;min-width:0; }
.msg-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border);
  font-weight:600;color:var(--primary);
}
.msg-head-av{
  width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  object-fit:cover;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.msg-box{
  flex:1;min-height:360px;max-height:60vh;overflow-y:auto;
  padding:16px;display:flex;flex-direction:column;gap:14px;
  background:var(--bg);
}
.msg-row{ display:flex;gap:8px;max-width:82%;align-items:flex-end; }
.msg-row.mine{ align-self:flex-end;flex-direction:row-reverse; }
.msg-row.theirs{ align-self:flex-start;flex-direction:row; }
.msg-av{
  width:36px;height:36px;border-radius:50%;flex:0 0 36px;
  object-fit:cover;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.msg-content{ display:flex;flex-direction:column;min-width:0; }
.msg-row.mine .msg-content{ align-items:flex-end; }
.msg-bubble{
  padding:9px 13px;border-radius:12px;font-size:14px;
  word-break:break-word;line-height:1.5;max-width:100%;
}
.msg-row.mine .msg-bubble{ background:var(--primary);color:#fff;border-bottom-right-radius:3px; }
.msg-row.theirs .msg-bubble{ background:var(--card);color:#444;border:1px solid var(--border);border-bottom-left-radius:3px; }
.msg-time{ font-size:11px;color:var(--muted);margin-top:3px; }
.msg-send{ display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border); }
.msg-send input{ margin-bottom:0;flex:1; }
.msg-send .btn{ padding:10px 22px;white-space:nowrap; }

/* ============ 欢迎弹窗 ============ */
.welcome-popup{ position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center; }
.welcome-popup-mask{ position:absolute;inset:0;background:rgba(0,0,0,.45); }
.welcome-popup-box{
  position:relative;z-index:1;width:min(420px,90vw);
  background:var(--card);border-radius:14px;padding:28px 24px 24px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  text-align:center;animation:wp-pop .25s ease;
}
@keyframes wp-pop{ from{ transform:scale(.92);opacity:0; } to{ transform:scale(1);opacity:1; } }
.welcome-close{
  position:absolute;top:10px;right:12px;
  border:none;background:transparent;font-size:24px;line-height:1;
  color:var(--muted);cursor:pointer;
}
.welcome-close:hover{ color:var(--text); }
.welcome-title{ margin:0 0 14px;font-size:20px;color:var(--primary); }
.welcome-content{ font-size:15px;color:#555;line-height:1.7;white-space:pre-wrap;margin-bottom:22px; }
.welcome-ok{ width:100%;padding:11px;font-size:15px; }

@media (max-width:768px){
  .msg-layout{ flex-direction:column; }
  .msg-side{ width:auto;flex:none;border-right:none;border-bottom:1px solid var(--border); }
  .msg-friends{ max-height:160px; }
}

/* ============ 我的：钱包 / 签到 ============ */
.me-wallet{ margin-bottom:18px; }
.me-wallet-head{ font-weight:600;margin-bottom:12px;color:var(--primary); }
.me-stats{ display:flex;gap:12px;margin-bottom:14px; }
.me-stat{
  flex:1;text-align:center;background:var(--bg);border-radius:10px;padding:14px 6px;
}
.me-stat-num{ display:block;font-size:22px;font-weight:700;color:var(--primary); }
.me-stat-label{ display:block;font-size:12px;color:var(--muted);margin-top:4px; }
.me-sign-btn{ width:100%;padding:11px;font-size:15px; }
.me-sign-done{
  text-align:center;padding:11px;border-radius:10px;
  background:var(--bg);color:var(--muted);font-size:14px;
}

/* ============ 后台：禁言标签 ============ */
.tag{ display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;background:var(--bg);color:var(--muted); }
.tag-warn{ background:#fff3cd;color:#a87b00; }

/* ============ 阅读进度条 ============ */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:60;}
.reading-progress-bar{height:100%;width:0;background:var(--primary);transition:width .08s linear;}

/* ============ 文章列表徽章 ============ */
.article-item .badge,
.art-title .badge{display:inline-block;font-size:12px;font-weight:600;padding:1px 9px;border-radius:10px;margin-right:6px;vertical-align:middle;}
.badge.top{background:#fff3cd;color:#a87b00;}
.badge.lock{background:#fdeaea;color:#c0392b;}

/* ============ 私密文章密码门 ============ */
.private-gate{margin-top:18px;padding:26px 22px;background:var(--bg);border-radius:10px;text-align:center;}
.private-tip{color:#666;margin-bottom:14px;font-size:14px;}
.private-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.private-form input[type=password]{width:auto;min-width:220px;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px;}

/* ============ 私密相册占位 ============ */
.gallery-item{position:relative;overflow:hidden;border-radius:8px;background:#fff;}
.gallery-item.is-locked{cursor:pointer;}
.lock-placeholder{width:100%;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#eef1f5,#dfe4ea);color:#8a8f99;}
.lock-placeholder .lock-text{font-size:13px;text-align:center;padding:0 14px;line-height:1.6;}
.privacy-badge{position:absolute;top:8px;left:8px;background:rgba(192,57,43,.92);color:#fff;font-size:12px;padding:2px 8px;border-radius:10px;}

/* ============ 文章封面水波纹（仅 PC 端） ============ */
.art-cover{position:relative;overflow:hidden;}
.art-cover .ripple{
  position:absolute;border-radius:50%;
  transform:scale(0);background:rgba(255,255,255,.45);
  pointer-events:none;animation:rippleAnim .6s ease-out forwards;
}
@keyframes rippleAnim{to{transform:scale(2.4);opacity:0;}}

/* ============ 顶部博客名称扫光（PC + 移动端） ============ */
.logo{position:relative;overflow:hidden;}
.logo::after{
  content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.75) 50%,transparent 100%);
  transform:skewX(-18deg);pointer-events:none;
  animation:logoShine 3.2s ease-in-out infinite;
}
@keyframes logoShine{0%{left:-80%;}60%,100%{left:130%;}}

/* ============ 密码弹窗（私密相册） ============ */
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);}
.modal-box{width:min(380px,90vw);background:#fff;border-radius:12px;padding:24px;box-shadow:0 12px 40px rgba(0,0,0,.25);}
.modal-box h3{margin:0 0 10px;color:var(--primary);}
.modal-tip{color:#666;font-size:14px;margin:0 0 14px;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;}
.btn.ghost{background:#fff;border:1px solid var(--border);color:#555;padding:9px 18px;border-radius:6px;cursor:pointer;}
.btn.ghost:hover{background:var(--bg);}