/* ========== 站点布局 + 聊天广场 ========== */

/* PC（≥1024）：主内容 + 右侧固定 440px 聊天广场 */
@media (min-width: 1024px){
  .site-layout{
    display:flex;
    align-items:flex-start;
    gap:48px;
    max-width:none;
    margin:0;
    padding:18px 28px 0;
    box-sizing:border-box;
    position:relative;
    transition:max-width .25s ease, padding .25s ease;
  }
  .site-main{ flex:1 1 auto; min-width:0; }
  /* 展开聊天广场时，给主内容区一个左右内边距，避免与视口边缘贴合 */
  body:not(.cp-collapsed-state) .site-main{ padding-left:24px; padding-right:8px; box-sizing:border-box; }
  .site-main > .page-banner:first-child{ margin-top:0 !important; }
  /* 仅在展开状态下让主内容容器满屏；折叠时恢复默认 1200/1480 居中容器 */
  body:not(.cp-collapsed-state) .site-main .container,
  body:not(.cp-collapsed-state) .site-main .fz-hero-wrap,
  body:not(.cp-collapsed-state) .site-main .fz-hero{
    max-width:none !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box;
  }
  /* 子页面：banner 内标题容器 + banner 后的内容容器，都需要左右内边距 */
  body:not(.cp-collapsed-state) .site-main .page-banner > .container,
  body:not(.cp-collapsed-state) .site-main .page-banner ~ .container{
    padding-left:28px !important;
    padding-right:28px !important;
  }
  /* 折叠态：让首页/子页面都充满 site-layout（80vw），首页不再被 .container 内边距额外缩窄 */
  body.cp-collapsed-state .site-main .container{
    max-width:100% !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box;
  }
  body.cp-collapsed-state .site-main > .fz-hero-wrap.container{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .site-aside{
    flex:0 0 440px; width:440px;
    position:sticky; top:84px;
    margin-top:0;
    align-self:flex-start;
    height:calc(100vh - 100px);
    overflow:hidden;
    scrollbar-width:thin;
    overscroll-behavior:contain;
  }
  .site-header .container{ max-width:none !important; padding-left:24px !important; padding-right:24px !important; }
  /* 折叠时 header 容器恢复正常宽度 */
  body.cp-collapsed-state .site-header .container,
  body.cp-collapsed-state .site-footer .container{ max-width:80vw !important; margin:0 auto !important; padding-left:24px !important; padding-right:24px !important; }

  /* 折叠/展开按钮（仅 PC）：固定在视口右侧、垂直居中 */
  .cp-toggle{
    /* aside 宽度 440 + .site-layout 右内边距 28 - 重叠 3 = 465 */
    position:fixed; top:50%; right:465px;
    transform:translateY(-50%);
    width:34px; height:88px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#10271a,#1f4a28); color:#fff;
    border:none; border-radius:12px 0 0 12px; cursor:pointer;
    box-shadow:-4px 6px 22px -8px rgba(16,39,26,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
    font-size:22px; font-weight:700; line-height:1; z-index:9999;
    transition:right .28s ease, background .2s ease;
  }
  .cp-toggle:hover{ background:linear-gradient(135deg,#163c25,#246a35); }

  /* 折叠态：隐藏 aside；layout 收回到 1280 居中（不满屏） */
  .site-layout.cp-collapsed{
    max-width:80vw;
    margin:0 auto;
    padding:18px 24px 0;
  }
  .site-layout.cp-collapsed .site-aside{ display:none; }
  body.cp-collapsed-state .cp-toggle{ right:0 !important; }

  /* 子页面也需要保证 sticky 生效：layout 至少要和 aside 一样高 */
  .site-layout{ min-height:calc(100vh - 80px); }

  /* 当 aside 显示时（未折叠），同时让 header / footer 也满屏 */
  body:not(.cp-collapsed-state) .site-header .container,
  body:not(.cp-collapsed-state) .site-footer .container{
    max-width:none !important;
  }

  /* 子页面展开聊天广场时，恢复内容容器上下内边距 */
  body:not(.cp-collapsed-state) .site-main .page-banner ~ .container{
    padding-top:26px !important;
    padding-bottom:32px !important;
    box-sizing:border-box;
  }
}

/* 平板/手机：隐藏 aside 与按钮，使用 chat.php 入口 */
@media (max-width: 1023px){
  .site-layout{ display:block; }
  .site-aside{ display:none; }
  .cp-toggle{ display:none !important; }
}

/* 让 footer 始终满屏，不被 layout 包裹影响 */
.site-footer{ clear:both; }

/* ========== 聊天广场卡片 ========== */
.cp-box{
  background:#fff;
  border:1px solid #ece6d4;
  border-radius:18px;
  box-shadow:0 18px 42px -28px rgba(31,74,40,.22);
  padding:18px 18px 16px;
  height:100%;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
@media (min-width:1024px){
  .site-aside .cp-box{ overflow:hidden; }
  .site-aside .cp-list{ flex:1 1 auto; overflow-y:auto; min-height:0; overscroll-behavior:contain; }
  .site-aside .cp-more-wrap{ flex:0 0 auto; margin-top:12px; }
}
.cp-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.cp-title{ margin:0 0 4px; font-size:18px; color:#10271a; font-weight:700; }
.cp-sub{ margin:0; color:#7a8473; font-size:13px; }
.cp-publish{
  appearance:none; border:none; cursor:pointer;
  background:linear-gradient(135deg,#10271a,#1f4a28);
  color:#fff; font-weight:600; font-size:14px;
  padding:8px 18px; border-radius:999px;
  box-shadow:0 6px 16px -8px rgba(16,39,26,.55);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cp-publish:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(16,39,26,.6); }

.cp-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 8px; }
.cp-chip{
  appearance:none; cursor:pointer;
  border:1px solid #e3decd; background:#faf7ed; color:#4d5a47;
  font-size:13px; padding:6px 14px; border-radius:999px;
  transition:.15s ease;
}
.cp-chip.active{
  background:linear-gradient(135deg,#10271a,#1f4a28);
  border-color:transparent; color:#fff;
  box-shadow:0 6px 14px -6px rgba(16,39,26,.5);
}
.cp-chip:hover:not(.active){ border-color:#b8c2a6; }

.cp-login-tip{
  margin:10px 0 6px; padding:10px 12px;
  background:#fbf5e6; border:1px solid #ecd9a6; color:#7a5b1a;
  border-radius:12px; font-size:13px; line-height:1.6;
}
.cp-login-tip a{ color:#1a8a52; font-weight:600; margin-left:6px; }

.cp-list{ display:flex; flex-direction:column; gap:14px; margin-top:10px; }
.cp-empty{ text-align:center; color:#999; padding:24px 8px; font-size:14px; }

.cp-post{
  background:#fff; border:1px solid #eee4cf; border-radius:14px;
  padding:12px 14px; transition:.15s ease;
}
.cp-post:hover{ border-color:#cdc2a0; box-shadow:0 6px 18px -12px rgba(31,74,40,.25); }
.cp-post-head{ display:flex; align-items:center; gap:10px; }
.cp-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:0 0 36px; background:#eee; cursor:pointer; }
.cp-meta{ flex:1; min-width:0; }
.cp-nick{ color:#10271a; font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px; }
.cp-nick a, .cp-reply-nick{
  color:inherit; text-decoration:none; cursor:pointer;
  transition:opacity .15s;
}
.cp-nick a:hover, a.cp-reply-nick:hover{ opacity:.75; text-decoration:underline; text-decoration-color:rgba(16,39,26,.35); text-underline-offset:3px; }
.cp-tag{
  display:inline-block; font-size:11px; line-height:1; padding:3px 8px;
  background:#fdecec; color:#c0392b; border-radius:999px;
  font-weight:500;
}
.cp-time{ color:#9aa18f; font-size:12px; flex:0 0 auto; }
.cp-text{ margin:8px 0 10px; color:#3a443a; font-size:14px; line-height:1.65; word-break:break-word; }

.cp-imgs{ display:grid; gap:4px; margin:6px 0 10px; border-radius:10px; overflow:hidden; }
.cp-imgs-1{ grid-template-columns:1fr; }
.cp-imgs-2{ grid-template-columns:1fr 1fr; }
.cp-imgs-3{ grid-template-columns:1fr 1fr 1fr; }
.cp-imgs-grid{ grid-template-columns:repeat(3,1fr); gap:6px; }
.cp-imgs a{ display:block; aspect-ratio:1/1; overflow:hidden; background:#f0ece0; border-radius:8px; }
.cp-imgs-1 a{ aspect-ratio:16/10; }
.cp-imgs img{ width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; transition:transform .25s ease; }
.cp-imgs a:hover img{ transform:scale(1.04); }

/* 回复区 */
.cp-replies-wrap{ margin-top:10px; padding:10px 12px; background:#fbf9f1; border:1px solid #ecd9a6; border-radius:12px; }
.cp-replies-list{ display:flex; flex-direction:column; gap:8px; }
.cp-reply{ padding:8px 10px; background:#fff; border:1px solid #efe9d6; border-radius:10px; }
.cp-reply-head{ display:flex; align-items:center; gap:8px; font-size:12px; color:#9aa18f; margin-bottom:4px; }
.cp-reply-nick{ color:#10271a; font-weight:600; font-size:13px; }
.cp-reply-text{ color:#3a443a; font-size:13px; line-height:1.6; word-break:break-word; }
.cp-reply-del{ background:none; border:none; cursor:pointer; color:#999; font-size:13px; padding:0 4px; }
.cp-reply-del:hover{ color:#c0392b; }
.cp-reply-empty{ text-align:center; color:#999; font-size:13px; padding:6px; }
.cp-reply-more{
  display:block; width:100%; margin-top:8px;
  background:transparent; border:1px dashed #c4d0b4; color:#1f4a28;
  padding:6px 10px; border-radius:8px; cursor:pointer; font-size:13px;
}
.cp-reply-more:hover{ background:#eaf0e2; }
.cp-reply-form{ display:flex; gap:8px; align-items:flex-start; margin-top:10px; }
.cp-reply-form textarea{
  flex:1 1 auto; width:100%; min-height:44px; max-height:160px;
  border:1.5px solid #b8c2a6; border-radius:22px;
  padding:11px 16px; font:inherit; font-size:13px; resize:none;
  background:#fff; color:#222; line-height:1.5;
  box-shadow:inset 0 1px 3px rgba(20,30,20,.08);
  transition:border-color .15s, box-shadow .15s;
}
.cp-reply-form textarea::placeholder{ color:#7a8473; opacity:1; }
.cp-reply-form textarea::-webkit-input-placeholder{ color:#7a8473; opacity:1; }
.mention-placeholder{ color:#7a8473; opacity:1; }
.cp-reply-form textarea:focus{
  outline:none; border-color:#1f4a28;
  box-shadow:0 0 0 3px rgba(31,74,40,.12);
}
.cp-reply-submit{
  background:linear-gradient(135deg,#10271a,#1f4a28); color:#fff;
  border:none; cursor:pointer; padding:0 16px; height:44px; border-radius:999px;
  font-weight:600; font-size:13px; flex-shrink:0;
  box-shadow:0 2px 8px rgba(16,39,26,.25);
  transition:transform .12s, box-shadow .15s;
}
.cp-reply-submit:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(16,39,26,.32); }
.cp-reply-submit:disabled{ opacity:.6; cursor:wait; }

.cp-actions{ display:flex; align-items:center; gap:18px; color:#8a9183; font-size:13px; padding-top:6px; border-top:1px dashed #efe9d6; }
.cp-act{
  appearance:none; border:none; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; color:inherit; font:inherit; padding:6px 2px;
}
.cp-act:hover{ color:#1f4a28; }
.cp-act-spacer{ flex:1; }
.cp-edit-btn,.cp-del-btn{ background:none; border:none; cursor:pointer; font-size:14px; color:#999; padding:2px 6px; }
.cp-edit-btn:hover{ color:#1f4a28; }
.cp-del-btn:hover{ color:#c0392b; }
.cp-actions form{ margin:0; }
.cp-img-cell{ position:relative; display:block; }
.cp-img-more{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,15,12,.55); color:#fff; font-size:20px; font-weight:600; border-radius:8px;
  cursor:pointer; user-select:none;
}
.cp-imgs-all{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:6px;
}
.cp-imgs-all a{ display:block; }
.cp-imgs-all img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; background:#f0ece0; }

.cp-more-wrap{ margin-top:14px; }
.cp-more{
  width:100%;
  background:linear-gradient(135deg,#e8efe2,#d6e2cb);
  border:1px solid #c4d0b4;
  color:#1f4a28; font-weight:600; font-size:14px;
  padding:11px 14px; border-radius:14px; cursor:pointer;
  transition:.15s ease;
}
.cp-more:hover{ background:linear-gradient(135deg,#dee8d4,#c7d6ba); }
.cp-more.loading{ opacity:.6; cursor:wait; }

/* 弹层 */
.cp-modal[hidden]{ display:none !important; }
.cp-modal{ position:fixed !important; inset:0 !important; z-index:100000 !important; display:flex; align-items:center; justify-content:center; }
.cp-modal-mask{ position:absolute; inset:0; background:rgba(10,15,12,.55); }
.cp-modal-box{
  position:relative; z-index:1; width:min(92vw,460px);
  background:#fff; border-radius:18px; padding:20px 22px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
}
.cp-modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cp-modal-head h4{ margin:0; color:#10271a; font-size:18px; }
.cp-modal-x{ background:none; border:none; font-size:24px; line-height:1; cursor:pointer; color:#888; }
.cp-modal-body{ display:flex; flex-direction:column; gap:12px; }
.cp-field{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:#4d5a47; }
.cp-field input, .cp-field select, .cp-field textarea{
  width:100%; border:1px solid #d8d2bf; border-radius:10px; padding:10px 12px;
  font:inherit; color:#222; background:#fbfaf4; box-sizing:border-box; resize:vertical;
}
.cp-field textarea{ min-height:120px; }
.cp-field input:focus, .cp-field select:focus, .cp-field textarea:focus{ outline:none; border-color:#1f4a28; background:#fff; }
.cp-modal-foot{ display:flex; justify-content:flex-end; gap:10px; }
.cp-cancel{
  background:#f0ebe0; border:1px solid #d8d2bf; color:#5a5544;
  padding:8px 18px; border-radius:999px; cursor:pointer; font-weight:500;
}

/* ====== 图片灯箱 ====== */
.cp-lightbox[hidden]{ display:none !important; }
.cp-lightbox{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.cp-lb-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.86);
  backdrop-filter: blur(2px);
}
.cp-lb-stage{
  position:relative; z-index:1;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:48px 56px;
  box-sizing:border-box;
}
.cp-lb-img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  cursor:default;
  user-select:none;
  -webkit-user-drag:none;
}
.cp-lb-close, .cp-lb-prev, .cp-lb-next{
  position:absolute; z-index:2;
  background:rgba(0,0,0,.45);
  color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family: inherit;
  transition: background .15s, transform .15s;
}
.cp-lb-close:hover, .cp-lb-prev:hover, .cp-lb-next:hover{
  background:rgba(0,0,0,.75);
}
.cp-lb-close{
  top:14px; right:14px;
  width:40px; height:40px; font-size:24px; line-height:1;
}
.cp-lb-prev, .cp-lb-next{
  top:50%; transform:translateY(-50%);
  width:46px; height:46px; font-size:30px; line-height:1;
}
.cp-lb-prev{ left:14px; }
.cp-lb-next{ right:14px; }
.cp-lb-counter{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  z-index:2; color:#fff; font-size:13px;
  background:rgba(0,0,0,.45); padding:4px 12px; border-radius:999px;
  pointer-events:none;
}
@media (max-width:640px){
  .cp-lb-stage{ padding:60px 12px; }
  .cp-lb-close{ top:10px; right:10px; width:36px; height:36px; font-size:22px; }
  .cp-lb-prev, .cp-lb-next{ width:38px; height:38px; font-size:24px; }
  .cp-lb-prev{ left:6px; } .cp-lb-next{ right:6px; }
}
.cp-img-cell{ cursor: zoom-in; }

/* ===== 楼中楼（抖音式） ===== */
.cp-reply{ position:relative; }
.cp-reply-foot{ margin-top:4px; display:flex; align-items:center; gap:10px; }
.cp-subreply-btn{
  background:none; border:none; padding:2px 0; cursor:pointer;
  color:#7a8a7c; font-size:12px; line-height:1;
}
.cp-subreply-btn:hover{ color:#1f4a28; }
.cp-reply-arrow{ color:#b8c2b8; font-size:11px; margin:0 2px; }
.cp-reply-to{ color:#1f6f3a; font-weight:600; font-size:12px; }
.cp-subreplies{
  margin-top:8px; margin-left:14px; padding:2px 0 0 12px;
  background:transparent; border:none;
  border-left:2px solid #e6dfc6;
  display:flex; flex-direction:column; gap:6px;
}
.cp-subreplies:empty{ display:none; }
.cp-reply-sub{
  background:transparent; border:none; padding:4px 0;
  border-radius:0;
}
.cp-reply-sub .cp-reply-text{ font-size:13px; color:#3a443a; }
.cp-subreply-more{
  align-self:flex-start;
  background:none; border:none; cursor:pointer;
  color:#1f6f3a; font-size:12px; padding:2px 0;
}
.cp-subreply-more:hover{ text-decoration:underline; }
.cp-subreply-form{ margin-top:8px; }
.cp-subreply-form textarea{ font-size:13px; }