/* ============ 动态（便签墙/便签流） ============ */
.filter-strip {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 12px 16px 4px; flex-shrink: 0;
}
.filter-strip::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0; border: none; cursor: pointer; font-family: inherit;
  background: #fff; color: #555; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  display: flex; align-items: center; gap: 6px;
}
.filter-chip.active { background: #07c160; color: #fff; }
.filter-chip .chip-avatar {
  width: 20px; height: 20px; border-radius: 50%; background: #eef4ff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 12px; flex-shrink: 0;
}
.filter-chip .chip-avatar img { width: 100%; height: 100%; object-fit: cover; }

.moments-body {
  flex: 1; overflow-y: auto;
  background: #f0f4fa; padding: 18px 16px 28px;
}
/* 桌面：便签墙 */
.moments-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px; align-items: start;
}
.moment-note {
  background: #fffdf4; border-radius: 8px; padding: 16px 16px 12px;
  box-shadow: 0 2px 10px rgba(56, 77, 115, 0.10);
  position: relative; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  word-break: break-word;
  -webkit-tap-highlight-color: transparent; /* 去除系统 tap 高亮，避免点一下整卡变亮 */
}
.moment-note.wide { grid-column: span 2; }
.moment-note.rot-l { transform: rotate(-1.6deg); }
.moment-note.rot-r { transform: rotate(1.6deg); }
.moment-note .note-tape {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 18px; background: rgba(255, 214, 130, 0.55);
  border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
@media (hover: hover) {
  .moment-note:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 10px 26px rgba(56, 77, 115, 0.18);
    z-index: 2;
  }
}
.moment-note .note-text { font-size: 14px; line-height: 1.65; color: #3d3d3d; }
.moment-note .note-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.moment-note .note-imgs img {
  width: 74px; height: 74px; object-fit: cover; border-radius: 6px;
}
.moment-note .note-meta {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e6ddc8;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: #a89f8a;
}
.moment-note .note-author { display: flex; align-items: center; gap: 5px; }
.moment-note .note-author .na-avatar {
  width: 18px; height: 18px; border-radius: 50%; background: #eef4ff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 11px;
}
.moment-note .note-author .na-avatar img { width: 100%; height: 100%; object-fit: cover; }
.moments-empty {
  text-align: center; color: #999; font-size: 13px; padding: 60px 20px;
}
/* 手机：纵向交错便签流（强制单列，禁止多列压缩） */
@media (max-width: 767px) {
  .moments-body { overflow-x: hidden; }
  .moments-wall {
    display: flex; flex-direction: column; gap: 16px;
    width: 100%; grid-template-columns: none;
  }
  .moment-note { width: 100%; max-width: 100%; min-width: 0; }
  .moment-note.wide { width: 100%; grid-column: auto; }
  .moment-note:nth-child(even) { transform: translateX(6px) rotate(0.6deg); }
  .moment-note:nth-child(odd)  { transform: translateX(-4px) rotate(-0.6deg); }
  /* 手机端不使用 hover（触屏点击会触发粘性 hover，导致纸条摆动）；错位保持固定 */
}

/* 动态收藏按钮（手机/桌面端均显示，收藏按身份隔离） */
.moment-fav {
  border: none; background: transparent; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 4px;
  color: #c9b891; display: inline-flex; align-items: center;
}
/* 桌面端：新建动态 + 管理动态（底部中间一组） */
.moments-body { position: relative; }
.moment-action-bar {
  position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%);
  z-index: 5; display: flex; gap: 10px; align-items: center;
}
.add-moment-btn {
  border: none; cursor: pointer; font-family: inherit;
  background: #07c160; color: #fff; font-size: 14px; font-weight: 600;
  padding: 11px 22px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(7,193,96,0.4); transition: transform 0.15s, box-shadow 0.15s;
}
.add-moment-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(7,193,96,0.5); }
.manage-moment-btn {
  border: none; cursor: pointer; font-family: inherit;
  background: #fff; color: #555; font-size: 14px; font-weight: 600;
  padding: 11px 18px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: transform 0.15s, box-shadow 0.15s;
}
.manage-moment-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.16); }
/* 管理菜单（按钮上方弹出） */
.manage-moment-menu {
  position: absolute; bottom: calc(100% + 10px); right: -10px;
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border-radius: 12px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16); border: 1px solid #eef0f5;
  min-width: 140px;
}
.mm-item {
  border: none; cursor: pointer; font-family: inherit; text-align: center;
  background: transparent; color: #333; font-size: 13px;
  padding: 9px 12px; border-radius: 8px; display: flex; align-items: center; gap: 8px;
}
.mm-item:hover { background: #f1f3f5; }

/* 删除模式下的便签样式 */
.moment-note.del-single { cursor: pointer; }
.moment-note.del-single:hover { box-shadow: 0 0 0 2px #e5484d, 0 6px 18px rgba(229,72,77,0.2); }
.moment-note.del-batch { cursor: pointer; }
.moment-select-mark {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2px solid #c9cdd6;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; font-weight: 700;
}
.moment-note.del-batch:hover .moment-select-mark { border-color: #07c160; }
.moment-select-mark.checked { background: #07c160; border-color: #07c160; }

/* 批量删除按钮（右下角：距底 60px、左缘 75px） */
.batch-delete-btn {
  position: absolute; right: 75px; bottom: 60px; z-index: 6;
  border: none; cursor: pointer; font-family: inherit;
  background: #e5484d; color: #fff; font-size: 14px; font-weight: 600;
  padding: 11px 20px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(229,72,77,0.4); transition: transform 0.15s, background 0.15s;
  display: none; align-items: center; gap: 6px;
}
.batch-delete-btn.show { display: inline-flex; }
.batch-delete-btn:hover { transform: translateY(-2px); }
.batch-delete-btn.has-selection { background: #d63c41; box-shadow: 0 8px 22px rgba(229,72,77,0.55); }

/* ============ 桌面端：新建动态 + 发布浮层 ============ */
/* 发布浮层：遮罩 + 底部中间面板 */
.publish-moment-overlay {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25);
  padding: 0 16px 20px;
}
.publish-moment-panel {
  display: flex; gap: 48px; align-items: stretch;
  max-width: 940px; width: 100%;
  background: transparent; border-radius: 16px; padding: 0;
  box-shadow: none;
}
/* 左右两张卡片 */
.publish-card {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px;
  border: 1px solid #eef0f5; border-radius: 12px; padding: 16px;
  background: #fdfdff; height: 640px;
}
.publish-card-head { font-size: 15px; font-weight: 700; color: #333; }
.pm-input {
  width: 100%; border: 1px solid #ccc; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; background: #fff; font-family: inherit;
  color: #333; resize: vertical; min-height: 72px;
}
.pm-input:focus { outline: none; border-color: #07c160; }
.pm-img-row { display: flex; flex-direction: column; gap: 6px; }
.pm-img-preview {
  min-height: 64px; border: 1px dashed #c9cdd6; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 12px; color: #aaa; background: #fafbfc;
}
.pm-img-preview img { max-width: 100%; max-height: 120px; object-fit: cover; }
.pm-img-actions { display: flex; gap: 6px; }
.pm-img-actions .char-btn { flex: 1; }
.pm-submit {
    margin-top: auto;
    height: 44px;
    flex: none;
    width: 360px;
    align-self: center;
}

/* 角色复选 */
.pm-role-select {
  display: flex; flex-wrap: wrap; gap: 8px; max-height: 120px; overflow-y: auto;
}
.pm-role-item { cursor: pointer; }
.pm-role-item input { display: none; }
.pm-role-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f1f3f5; border-radius: 999px; padding: 5px 10px;
  font-size: 12px; color: #555; border: 1px solid transparent; transition: all 0.15s;
}
.pm-role-item input:checked + .pm-role-chip {
  background: #07c160; color: #fff; border-color: #07c160;
}
.pm-count-row { display: flex; align-items: center; gap: 8px; }
.pm-count-label { font-size: 13px; color: #666; flex-shrink: 0; }
.pm-count-slider { flex: 1; accent-color: #07c160; }
.pm-count-text { font-size: 14px; color: #333; font-weight: 600; width: 16px; text-align: center; }
.pm-instruct { min-height: 56px; }
/* AI 生图占位 */
.pm-gen-image-placeholder {
  border: 1px dashed #d8cfb8; border-radius: 10px; padding: 12px;
  font-size: 12px; color: #a08c66; text-align: center; background: #fffdf6;
}

/* ============ 桌面端：便签右键菜单 + 就地编辑 ============ */
/* 右键菜单 */
.moment-context-menu {
  position: fixed; z-index: 1000; min-width: 150px;
  background: #fff; border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18); border: 1px solid #eef0f5;
  display: flex; flex-direction: column; gap: 4px;
}
.moment-ctx-item {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  text-align: left; color: #333; font-size: 13px;
  padding: 9px 12px; border-radius: 8px; white-space: nowrap;
}
.moment-ctx-item:hover { background: #f1f3f5; }
.moment-ctx-item.danger { color: #e5484d; }
.moment-ctx-item.danger:hover { background: #fdecec; }

/* 编辑态便签 */
.moment-note-editing {
  border: 2px solid #07c160; cursor: default;
  display: flex; flex-direction: column; gap: 8px;
}
.moment-note-editing:hover { transform: none; box-shadow: 0 2px 10px rgba(56,77,115,0.10); }
.moment-note-editing .moment-edit-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: #999;
}
.moment-edit-author { font-weight: 600; color: #555; }
.moment-edit-hint { font-size: 11px; color: #aaa; font-style: italic; }
.moment-edit-text {
  width: 100%; border: 1px solid #ccc; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; background: #fff; font-family: inherit;
  color: #333; resize: vertical; min-height: 72px;
}
.moment-edit-text:focus { outline: none; border-color: #07c160; }
.moment-edit-img { display: flex; flex-direction: column; gap: 6px; }
.moment-edit-img-preview {
  min-height: 64px; border: 1px dashed #c9cdd6; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 12px; color: #aaa; background: #fafbfc;
}
.moment-edit-img-preview img { max-width: 100%; max-height: 140px; object-fit: cover; }
.moment-edit-img-actions { display: flex; gap: 6px; }
.moment-edit-img-actions .char-btn { flex: 1; }
.moment-edit-save { margin-top: 4px; align-self: stretch; }

/* 手机端顶部 tab 条：默认(桌面)隐藏，手机端显示 */
.pm-mob-tabs { display: none; }

/* ============ 手机端：动态管理（右上三横菜单 + 新增面板 + 批量删除） ============ */
@media (max-width: 767px) {
  /* 顶栏右上三横图标 */
  .mob-moments-menu-btn {
    margin-left: auto; position: relative; z-index: 2;
    border: none; background: #fff; border-radius: 10px;
    width: 34px; height: 34px; font-size: 16px; cursor: pointer;
    color: #333; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  }
  /* 右上三横小菜单 */
  .mob-moments-menu {
    position: absolute; top: 52px; right: 12px; z-index: 70;
    display: flex; flex-direction: column; gap: 4px;
    background: #fff; border-radius: 12px; padding: 6px; min-width: 150px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16); border: 1px solid #eef0f5;
  }
  .mob-mm-item {
    border: none; background: transparent; cursor: pointer; font-family: inherit;
    text-align: left; color: #333; font-size: 14px;
    padding: 10px 12px; border-radius: 8px;
  }
  .mob-mm-item:hover { background: #f1f3f5; }

  /* 手机端：新增动态浮层固定在屏幕 */
.publish-moment-overlay {
    position: fixed;
}

  /* 新增动态面板：占屏幕 2/3，顶部两 tab */
  .publish-moment-panel {
    flex-direction: column; max-width: 100%;
    height: 66vh; overflow-y: auto; gap: 8px;
    background: transparent; border-radius: 16px; padding: 0;
    box-shadow: none;
  }
  .pm-mob-tabs {
    display: flex; gap: 8px; flex-shrink: 0;
  }
  .pm-mob-tab {
    flex: 1; padding: 10px; border-radius: 10px; border: 1px solid #e3e6ee;
    background: #fff; color: #666; font-size: 14px; cursor: pointer; font-family: inherit;
  }
  .pm-mob-tab.active { background: #07c160; color: #fff; border-color: #07c160; font-weight: 600; }
  .publish-card { height: auto; min-height: 0; padding:16px 16px 1px; }
  .pm-submit {
  width: 80%;
  height: 40px;
    margin-bottom: 13px;
  }

  /* 管理动态 → 批量删除「删除已选」按钮 */
  .mob-batch-delete-btn {
    position: absolute; left: 16px; right: 16px; bottom: 64px; z-index: 40;
    border: none; cursor: pointer; font-family: inherit;
    background: #e5484d; color: #fff; font-size: 14px; font-weight: 600;
    padding: 12px; border-radius: 999px;
    box-shadow: 0 6px 18px rgba(229,72,77,0.4);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  }
  .mob-batch-delete-btn.has-selection { background: #d63c41; box-shadow: 0 8px 22px rgba(229,72,77,0.55); }

  /* 手机端：便签右下角「...」按钮 */
  .moment-more-btn {
    border: none; background: transparent; cursor: pointer; font-family: inherit;
    font-size: 16px; line-height: 1; color: #a89f8a; padding: 2px 6px;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  .moment-more-btn:active { background: #f0f4fa; border-radius: 6px; }
  /* 手机端横向小菜单 */
  .moment-more-menu {
    position: fixed; z-index: 1000;
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    background: #fff; border-radius: 14px; padding: 8px 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18); border: 1px solid #eef0f5;
  }
  .mm-more-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 16px; padding: 6px 4px; border-radius: 10px; cursor: pointer;
    font-size: 11px; color: #555; text-align: center;
  }
  .mm-more-item:hover { background: #f1f3f5; }
  .mm-more-item.danger { color: #e5484d; }
  .mm-more-item.danger:hover { background: #fdecec; }
  .mm-more-icon { font-size: 15px; line-height: 1; }
}