/* ===========================
   留言板模态框 & 便签墙
   =========================== */

/* ---- 模态框容器 ---- */
.msg-modal {
  display:none;
  position:fixed; inset:0;
  z-index:var(--z-modal, 400);
}
.msg-modal.active { display:block; }

.msg-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,.4);
  animation:msgOverlayIn .3s ease-out forwards;
}

@keyframes msgOverlayIn {
  from{opacity:0;} to{opacity:1;}
}

/* ---- 模态面板（居中） ---- */
.msg-panel {
  position:relative;
  width:88%; max-width:720px; max-height:80vh;
  margin:5vh auto 0;
  border-radius:20px;
  background:linear-gradient(135deg,#FFF9F0,#FFF5E6);
  box-shadow:0 16px 60px rgba(0,0,0,.18);
  overflow:hidden;
  display:flex; flex-direction:column;
  animation:msgPanelIn .35s cubic-bezier(.175,.885,.32,1.275) forwards;
}

@keyframes msgPanelIn {
  from{opacity:0; transform:translateY(40px) scale(.96);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

/* ---- 标题栏 ---- */
.msg-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,182,193,.2);
  flex-shrink:0;
}
.msg-header h3 {
  font-family:var(--font-handwritten);
  font-size:1.15rem; color:var(--color-text); margin:0;
}
.msg-close-btn {
  width:32px; height:32px; border-radius:50%; border:none;
  background:rgba(0,0,0,.06); color:#999;
  font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.msg-close-btn:hover { background:rgba(0,0,0,.12); color:#555; }

/* ---- 便签墙（瀑布流滚动区） ---- */
.msg-wall {
  flex:1; overflow-y:auto; padding:16px 18px;
  /* CSS Columns 瀑布流 */
  column-count:3; column-gap:12px;
  -webkit-column-fill:balance;
}
@media(max-width:600px){
  .msg-wall{ column-count:2; column-gap:8px; padding:10px 12px;}
}
@media(min-width:900px){
  .msg-wall{ column-count:4; }
}

/* ---- 单张便签卡片 ---- */
.msg-note {
  break-inside:avoid;
  background:#fff;
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.07);
  transition:transform .2s, box-shadow .2s;
  animation:msgNoteAppear .4s ease-out both;
  position:relative;
}
.msg-note:hover {
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

@keyframes msgNoteAppear {
  from{opacity:0; transform:translateY(20px) rotate(var(--note-rot,0deg)) scale(.92);}
  to{opacity:1; transform:translateY(0) rotate(var(--note-rot,0deg)) scale(1);}
}

/* 6种便签底色 */
.msg-note.color-0{background:linear-gradient(135deg,#FFF8E7,#FFF3D6);} /* 米黄 */
.msg-note.color-1{background:linear-gradient(135deg,#FFF0F5,#FFE4EC);} /* 浅粉 */
.msg-note.color-2{background:linear-gradient(135deg,#F0F8FF,#E0F0FF);} /* 浅蓝 */
.msg-note.color-3{background:linear-gradient(135deg,#F0FFF0,#DFFFDF);} /* 浅绿 */
.msg-note.color-4{background:linear-gradient(135deg,#F8F0FF,#EDDFFF);} /* 淡紫 */
.msg-note.color-5{background:linear-gradient(135deg,#FFF5E6,#FFE8CC);} /* 浅橙 */

/* 顶部装饰钉 */
.msg-note::before {
  content:''; display:block; width:10px; height:10px;
  border-radius:50%;
  background:var(--note-pin-color,#FFB6C1);
  position:absolute; top:-5px; left:50%;
  transform:translateX(-50%);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}

/* 留言内容 */
.msg-text {
  font-size:.9rem; line-height:1.55;
  color:var(--color-text);
  word-break:break-word; margin-top:6px;
}

/* 底部信息栏 */
.msg-meta {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:10px; padding-top:8px;
  border-top:1px dashed rgba(0,0,0,.08);
  font-size:.72rem; color:#aaa;
}
.msg-author {
  font-weight:500; color:var(--color-primary);
  margin-right:6px;
}
.msg-time { opacity:.7; }

/* 操作按钮组 */
.msg-actions {
  display:flex; align-items:center; gap:4px;
}
.msg-action-btn {
  background:none; border:none;
  font-size:.82rem; cursor:pointer;
  padding:2px 5px; border-radius:4px;
  transition:background .15s;
  color:#bbb; display:flex; align-items:center; gap:2px;
}
.msg-action-btn:hover { background:rgba(0,0,0,.05); }
.msg-action-btn.liked { color:#FF6B6B; }
.msg-action-btn .count { font-size:.68rem; min-width:14px; text-align:right; }

/* 编辑模式 */
.msg-edit-area {
  width:100%; border:none; resize:none;
  outline:none; font-size:.9rem; line-height:1.55;
  font-family:inherit; color:var(--color-text);
  background:transparent; margin-top:6px;
  border:1px dashed var(--color-primary); border-radius:6px;
  padding:4px 6px;
}
.msg-edit-actions {
  display:flex; justify-content:flex-end; gap:6px; margin-top:6px;
}
.msg-edit-btn {
  padding:3px 10px; border-radius:4px; border:1px solid var(--color-primary);
  background:transparent; color:var(--color-primary);
  font-size:.75rem; cursor:pointer;
}
.msg-edit-btn.primary {
  background:var(--color-primary); color:#fff;
}

/* ---- 输入区 ---- */
.msg-input-bar {
  padding:14px 18px; border-top:1px solid rgba(255,182,193,.2);
  flex-shrink:0; background:rgba(255,255,255,.5);
}
.msg-input-row {
  display:flex; gap:8px; align-items:center; margin-bottom:8px;
}
.msg-nickname-input {
  width:90px; padding:6px 10px; border-radius:8px;
  border:1px solid rgba(255,182,193,.3);
  font-size:.82rem; outline:none; background:rgba(255,255,255,.8);
  color:var(--color-text);
}
.msg-nickname-input::placeholder{ color:#ccc; }
.msg-textarea-wrap { flex:1; }
.msg-textarea {
  width:100%; padding:8px 12px; border-radius:10px;
  border:1px solid rgba(255,182,193,.3);
  font-size:.85rem; resize:none; outline:none;
  font-family:inherit; color:var(--color-text);
  background:rgba(255,255,255,.8);
  line-height:1.45; min-height:36px; max-height:80px;
  box-sizing:border-box;
}
.msg-textarea::placeholder{ color:#ccc; }
.msg-send-btn {
  padding:7px 18px; border-radius:10px;
  border:none; background:var(--color-primary); color:#fff;
  font-size:.85rem; font-weight:500; cursor:pointer;
  white-space:nowrap; transition:background .2s;
  box-shadow:0 2px 8px rgba(255,182,193,.3);
}
.msg-send-btn:hover { background:#ff8fa3; }
.msg-send-btn:active { transform:scale(.96); }

/* ---- 表情选择器 ---- */
.emoji-picker {
  display:none; position:absolute;
  bottom:100%; right:0; margin-bottom:4px;
  background:#fff; border-radius:12px;
  padding:8px; box-shadow:0 4px 16px rgba(0,0,0,.12);
  z-index:10; gap:4px;
}
.emoji-picker.show { display:flex; }
.emoji-opt {
  width:30px; height:30px; border-radius:6px;
  border:none; background:transparent;
  font-size:18px; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  transition:background .15s;
}
.emoji-opt:hover { background:rgba(255,182,193,.15); }

/* ---- 空状态 ---- */
.msg-empty {
  grid-column:1/-1; text-align:center;
  padding:40px 0; color:#ccc;
  font-family:var(--font-handwritten); font-size:1rem;
}

/* ---- 删除确认弹窗 ---- */
.msg-confirm-dlg {
  display:none; position:fixed;
  inset:0; z-index:500;
  justify-content:center; align-items:center;
  background:rgba(0,0,0,.25);
}
.msg-confirm-dlg.show { display:flex; }
.msg-confirm-box {
  background:#fff; border-radius:14px;
  padding:20px 24px; box-shadow:0 10px 40px rgba(0,0,0,.15);
  text-align:center; min-width:220px;
}
.msg-confirm-box p {
  font-size:.9rem; color:var(--color-text); margin:0 0 16px;
}
.msg-confirm-btns { display:flex; justify-content:center; gap:10px; }
.msg-confirm-btn {
  padding:6px 18px; border-radius:8px; border:none;
  font-size:.82rem; cursor:pointer;
}
.msg-confirm-btn.cancel {
  background:#f0f0f0; color:#666;
}
.msg-confirm-btn.danger {
  background:#ff6b6b; color:#fff;
}