/* ============================================================
 * koi-space.css — 空间/动态 Web 前端设计系统（B2 主题扩展层）
 * 主色沿用站点 #e93d59；统一圆角 14/10；hover=translateY+微阴影；
 * active=scale .96 触感；骨架屏/空状态/错误态齐全；暗色自适应。
 * 命名空间 .koi-sp 隔离，避免污染 B2 全站样式。
 * ========================================================== */

.koi-sp {
  --ksp-primary: #3a3f45;         /* 主按钮/强调统一深灰(用户定,不用粉) */
  --ksp-primary-soft: rgba(58, 63, 69, .08);
  --ksp-bg: #ffffff;
  --ksp-fg: #3a3f45;              /* B2 深灰主文字 */
  --ksp-fg-2: #5b6168;
  --ksp-muted: #9aa0a8;           /* B2 次要灰 */
  --ksp-line: #ebedf0;            /* B2 分隔线 */
  --ksp-soft: #f5f6f7;            /* B2 浅灰底 */
  --ksp-link: #2b76ff;
  --ksp-radius: 8px;              /* B2/koi 卡片圆角 */
  --ksp-radius-sm: 6px;
  --ksp-media-max: 440px;         /* 图片区最大宽(≈手机宽,不占满整个信息流内容页) */
  --ksp-shadow: 0 4px 16px rgba(16, 24, 40, .06);
  color: var(--ksp-fg);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  .koi-sp {
    --ksp-bg: #1a1c1e;
    --ksp-fg: #d6d9dd;
    --ksp-fg-2: #a8adb3;
    --ksp-muted: #777c82;
    --ksp-line: #2c2f33;
    --ksp-soft: #232629;
    --ksp-shadow: 0 4px 18px rgba(0, 0, 0, .4);
  }
}

/* 页面容器（详情=单列居中阅读宽；feed 在 /space 三列布局里填满中间栏） */
.koi-sp-page { max-width: 680px; margin: 0 auto; padding: 20px 16px 64px; }
/* ★真根因：koi-space-feed-r2.js:14 把 koi-sp-page 类加到 #koi-feed-app 元素自身，而 .koi-sp-page 有 max-width:680px+margin:auto，
   故整条动态流被压到 680px 居中 → 与两侧留大间距、不与顶栏齐平。此前写成 `#koi-feed-app .koi-sp-page`(后代选择器,带空格)根本不匹配。
   正解：compound(无空格) `#koi-feed-app.koi-sp-page` 去掉 680 上限 + 居中,让 feed 填满中间栏。 */
#koi-feed-app.koi-sp-page, #koi-feed-app .koi-sp-page { max-width: none !important; margin: 0 !important; padding: 0 0 48px !important; }
/* /space 中间栏填满（等同 circle.css 的 .circle-archive .content-area{width:0;flex:1}）。
   三列容器宽度/对齐已由 functions.php 把 body class 由 home/blog 修正为 archive 提供（对齐 /circle/xxx 归档页），此处只补中间栏填满兜底。 */
.b2-single-content.circle-archive #primary-home.content-area { flex: 1 1 0; width: 0; min-width: 0; }
.circle-archive .widget-area-left.widget-area { padding-left: 0; margin-left: 0; }
.koi-sp * { box-sizing: border-box; }

/* ---------- 卡片 ---------- */
.ksp-card {
  background: var(--ksp-bg);
  border: 1px solid var(--ksp-line);
  border-radius: var(--ksp-radius);
  padding: 16px 18px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ksp-card.is-tap { cursor: pointer; }
.ksp-card.is-tap:hover { box-shadow: var(--ksp-shadow); transform: translateY(-1px); }

/* ---------- 作者行 ---------- */
.ksp-author { display: flex; align-items: center; gap: 10px; }
.ksp-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; background: var(--ksp-soft); cursor: pointer; }
.ksp-author-meta { min-width: 0; flex: 1; }
.ksp-name-row { display: flex; align-items: center; gap: 5px; }
.ksp-name { font-weight: 600; color: var(--ksp-fg); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ksp-name:hover { color: var(--ksp-primary); }
.ksp-verified { color: var(--ksp-fg-2); font-size: 14px; line-height: 1; flex: none; display: inline-flex; align-items: center; }
.ksp-lv { font-size: 11px; color: var(--ksp-primary); background: var(--ksp-primary-soft); border-radius: 6px; padding: 0 5px; line-height: 16px; flex: none; }
.ksp-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; color: var(--ksp-muted); }
.ksp-vis { display: inline-flex; align-items: center; gap: 3px; }
.ksp-vis svg { width: 12px; height: 12px; }

/* ---------- 正文 + @提及 ---------- */
.ksp-content { margin: 12px 0 0; line-height: 1.72; color: var(--ksp-fg); white-space: pre-wrap; word-break: break-word; }
.ksp-content a.koi-mention, .ksp-content a[href*="user_id="] { color: var(--ksp-fg); font-weight: 600; text-decoration: none; }
.ksp-content a.koi-mention:hover { color: var(--ksp-primary); }

/* ---------- 图宫格 ---------- */
.ksp-grid { margin-top: 12px; border-radius: var(--ksp-radius-sm); overflow: hidden; max-width: var(--ksp-media-max); }
.ksp-grid-1 { max-height: 460px; }
.ksp-grid-1 .ksp-img { width: 100%; height: auto; max-height: 460px; object-fit: cover; display: block; border-radius: var(--ksp-radius-sm); }
.ksp-grid-multi { display: grid; gap: 3px; }
.ksp-grid-2, .ksp-grid-4 { grid-template-columns: repeat(2, 1fr); }
.ksp-grid-3, .ksp-grid-n { grid-template-columns: repeat(3, 1fr); }
.ksp-grid-multi .ksp-cell { position: relative; aspect-ratio: 1 / 1; overflow: hidden; cursor: zoom-in; background: var(--ksp-soft); }
.ksp-grid-multi .ksp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ksp-cell-more { position: absolute; inset: 0; background: rgba(0, 0, 0, .46); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }

/* 灯箱 */
.ksp-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; animation: ksp-fade .22s ease; }
.ksp-lb-img { max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: 6px; animation: ksp-zoom .26s cubic-bezier(.16, 1, .3, 1); }
.ksp-lb-close { position: absolute; top: 18px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; border: 0; font-size: 20px; cursor: pointer; }
.ksp-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; border: 0; font-size: 22px; cursor: pointer; }
.ksp-lb-prev { left: 16px; } .ksp-lb-next { right: 16px; }
.ksp-lb-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; background: rgba(0, 0, 0, .4); border-radius: 999px; padding: 3px 12px; }

/* ---------- 引用卡（转发） ---------- */
.ksp-quote { margin-top: 12px; background: var(--ksp-soft); border-radius: var(--ksp-radius-sm); padding: 10px 12px; cursor: pointer; transition: background .15s; }
.ksp-quote:hover { background: var(--ksp-line); }
.ksp-quote-author { font-size: 13px; color: var(--ksp-primary); font-weight: 600; }
.ksp-quote-text { margin-top: 4px; color: var(--ksp-fg-2); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ksp-quote > .ksp-quote-text:first-child { margin-top: 0; }
.ksp-quote a.koi-mention, .ksp-quote a[href*="user_id="] { color: var(--ksp-fg); font-weight: 600; text-decoration: none; }
.ksp-quote a.koi-mention:hover { color: var(--ksp-primary); }
.ksp-quote .ksp-grid { margin-top: 8px; }
.ksp-quote-deleted { color: var(--ksp-muted); font-size: 13.5px; }
.ksp-quote-card { display: flex; gap: 10px; align-items: center; }
.ksp-quote-thumb { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; flex: none; background: var(--ksp-bg); }

/* ---------- 互动条 ---------- */
.ksp-actions { display: flex; align-items: center; gap: 4px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--ksp-line); }
.ksp-act { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ksp-muted); font-size: 13.5px; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, transform .08s; }
.ksp-act:hover { background: var(--ksp-soft); color: var(--ksp-fg-2); }
.ksp-act:active { transform: scale(.94); }
.ksp-act.is-on { color: var(--ksp-primary); }
.ksp-act svg { width: 18px; height: 18px; }
.ksp-act-spacer { flex: 1; }

/* ---------- 徽标 ---------- */
.ksp-pill { display: inline-flex; align-items: center; border-radius: 999px; font-size: 11px; font-weight: 600; padding: 1px 8px; line-height: 1.7; }
.ksp-pill-pin { background: var(--ksp-primary-soft); color: var(--ksp-primary); }
.ksp-pill-vis { background: var(--ksp-soft); color: var(--ksp-muted); }
.ksp-badge { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 10px; font-weight: 600; border-radius: 999px; padding: 2px 7px; }
.ksp-inject { position: absolute; right: 12px; top: 12px; background: var(--ksp-primary); color: #fff; font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; }

/* ---------- 按钮 ---------- */
.ksp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; font-size: 14px; font-weight: 600; padding: 9px 18px; border: 1px solid transparent; cursor: pointer; transition: transform .08s, opacity .15s, background .15s; }
.ksp-btn:active { transform: scale(.97); }
.ksp-btn-primary { background: var(--ksp-primary); color: #fff; }
.ksp-btn-primary:hover { opacity: .92; }
.ksp-btn-primary:disabled { opacity: .5; cursor: default; }
.ksp-btn-ghost { background: transparent; border-color: var(--ksp-line); color: var(--ksp-fg-2); }
.ksp-btn-ghost:hover { border-color: var(--ksp-muted); }
.ksp-fab { position: fixed; right: 22px; bottom: 26px; z-index: 900; width: 54px; height: 54px; border-radius: 50%; background: var(--ksp-primary); color: #fff; border: 0; box-shadow: 0 8px 24px rgba(58, 63, 69, .28); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.ksp-fab:hover { transform: translateY(-2px); }
.ksp-fab:active { transform: scale(.94); }
.ksp-fab svg { width: 24px; height: 24px; }

/* ---------- 评论区 ---------- */
.ksp-comments { margin-top: 20px; }
.ksp-chead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ksp-ctitle { font-weight: 600; font-size: 15px; }
.ksp-csort { display: inline-flex; background: var(--ksp-soft); border-radius: 999px; padding: 3px; }
.ksp-csort button { border: 0; background: transparent; color: var(--ksp-muted); font-size: 13px; padding: 5px 14px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.ksp-csort button.is-on { background: var(--ksp-bg); color: var(--ksp-fg); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.ksp-comment { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--ksp-line); }
.ksp-comment.is-child { margin-left: 42px; }
.ksp-comment-body { flex: 1; min-width: 0; }
.ksp-comment-name { font-size: 13px; font-weight: 600; color: var(--ksp-fg); }
.ksp-comment-text { margin-top: 3px; line-height: 1.6; word-break: break-word; }
.ksp-comment-text a.koi-mention { color: var(--ksp-link); text-decoration: none; }
.ksp-comment-imgs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ksp-comment-imgs img { width: 74px; height: 74px; border-radius: 8px; object-fit: cover; cursor: zoom-in; }
.ksp-comment-foot { margin-top: 5px; font-size: 12px; color: var(--ksp-muted); display: flex; gap: 14px; }
.ksp-comment-foot span { cursor: pointer; }
.ksp-comment-foot span:hover { color: var(--ksp-fg-2); }

/* 评论输入 */
.ksp-cbox { display: flex; gap: 10px; margin: 14px 0; align-items: flex-start; }
.ksp-cbox textarea { flex: 1; border: 1px solid var(--ksp-line); border-radius: var(--ksp-radius-sm); background: var(--ksp-bg); color: var(--ksp-fg); padding: 10px 12px; font-size: 14px; line-height: 1.5; resize: none; min-height: 44px; font-family: inherit; }
.ksp-cbox textarea:focus { outline: none; border-color: var(--ksp-primary); background: var(--ksp-bg); }
.ksp-cbox textarea::placeholder { color: var(--ksp-muted); }
.ksp-more { text-align: center; padding: 12px; color: var(--ksp-muted); font-size: 13.5px; cursor: pointer; }
.ksp-more:hover { color: var(--ksp-primary); }

/* @候选面板 */
.ksp-mention-panel { border: 1px solid var(--ksp-line); border-radius: var(--ksp-radius-sm); background: var(--ksp-bg); max-height: 220px; overflow: auto; margin-top: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
.ksp-mention-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; }
.ksp-mention-item:hover { background: var(--ksp-soft); }
.ksp-mention-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* ---------- 模态 ---------- */
.ksp-modal-mask { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .42); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: ksp-fade .18s ease; }
.ksp-modal-card { background: var(--ksp-bg); border-radius: 18px; width: 100%; max-width: 520px; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); animation: ksp-rise .22s cubic-bezier(.16, 1, .3, 1); }
.ksp-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--ksp-line); }
.ksp-modal-title { font-weight: 700; font-size: 16px; }
.ksp-modal-x { border: 0; background: transparent; color: var(--ksp-muted); font-size: 22px; cursor: pointer; line-height: 1; }
.ksp-modal-body { padding: 16px 18px; overflow: auto; }
.ksp-modal-foot { padding: 12px 18px; border-top: 1px solid var(--ksp-line); display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.ksp-compose-ta { width: 100%; border: 0; background: transparent; color: var(--ksp-fg); font-size: 15.5px; line-height: 1.6; resize: none; min-height: 96px; font-family: inherit; }
/* 转发/编辑弹窗：被引用卡与正文输入之间留足间距 */
.ksp-modal-body .ksp-quote + .ksp-compose-ta { margin-top: 16px; }
.ksp-compose-ta:focus { outline: none; }
.ksp-compose-ta::placeholder { color: var(--ksp-muted); }
.ksp-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ksp-upload-cell { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--ksp-soft); }
.ksp-upload-cell img { width: 100%; height: 100%; object-fit: cover; }
.ksp-upload-del { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(20, 22, 26, .62); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .15s; }
.ksp-upload-del:hover { background: rgba(20, 22, 26, .82); }
.ksp-upload-add { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--ksp-line); border-radius: 10px; color: var(--ksp-muted); cursor: pointer; aspect-ratio: 1; font-size: 26px; }
.ksp-upload-add:hover { border-color: var(--ksp-primary); color: var(--ksp-primary); }
.ksp-upload-prog { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.ksp-vis-select { display: flex; gap: 8px; margin-top: 12px; }
.ksp-vis-opt { flex: 1; text-align: center; border: 1px solid var(--ksp-line); border-radius: 10px; padding: 8px 4px; font-size: 12.5px; color: var(--ksp-muted); cursor: pointer; transition: all .15s; }
.ksp-vis-opt.is-on { border-color: var(--ksp-primary); color: var(--ksp-primary); background: var(--ksp-primary-soft); }
.ksp-toolbar { display: flex; align-items: center; gap: 8px; }
.ksp-tool { width: 36px; height: 36px; border-radius: 9px; border: 0; background: var(--ksp-soft); color: var(--ksp-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ksp-tool:hover { color: var(--ksp-primary); }
.ksp-tool svg { width: 20px; height: 20px; }
/* 详情页评论区「添加图片」按钮：ID 规则确保图标够大够清楚(高于 .ksp-tool svg 优先级) */
#ksp-cimg-btn { width: 40px; height: 40px; }
#ksp-cimg-btn i { font-size: 24px; line-height: 1; color: var(--ksp-fg-2); }

/* ---------- feed / profile 列表 ---------- */
.ksp-list > * { margin-bottom: 14px; }
.ksp-feed-card { position: relative; }
.ksp-post-img { position: relative; margin-top: 12px; border-radius: var(--ksp-radius-sm); overflow: hidden; max-height: 340px; }
.ksp-post-img img { width: 100%; max-height: 340px; object-fit: cover; display: block; }

/* ---------- 骨架屏 ---------- */
.ksp-skel { position: relative; overflow: hidden; background: var(--ksp-soft); border-radius: 8px; }
.ksp-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: ksp-shimmer 1.3s infinite; }
.ksp-skel-card { border: 1px solid var(--ksp-line); border-radius: var(--ksp-radius); padding: 16px 18px; }
.ksp-skel-row { display: flex; gap: 10px; align-items: center; }
.ksp-skel-avatar { width: 42px; height: 42px; border-radius: 50%; }
.ksp-skel-line { height: 12px; border-radius: 6px; margin-top: 8px; }
.ksp-skel-img { height: 180px; border-radius: var(--ksp-radius-sm); margin-top: 12px; }

/* ---------- 空 / 错 态 ---------- */
.ksp-empty { text-align: center; padding: 56px 20px; color: var(--ksp-muted); }
.ksp-empty svg { width: 48px; height: 48px; opacity: .5; margin-bottom: 12px; }
.ksp-empty-title { font-size: 15px; color: var(--ksp-fg-2); font-weight: 600; }
.ksp-empty-desc { font-size: 13.5px; margin-top: 6px; }
.ksp-error { text-align: center; padding: 48px 20px; color: var(--ksp-muted); }
.ksp-error .ksp-btn { margin-top: 14px; }

/* ---------- 动画（尊重 reduced-motion） ---------- */
@keyframes ksp-shimmer { 100% { transform: translateX(100%); } }
@keyframes ksp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ksp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ksp-zoom { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ksp-skel::after { animation: none; }
  .ksp-modal-mask, .ksp-modal-card { animation: none; }
  .ksp-card, .ksp-btn, .ksp-act, .ksp-fab { transition: none; }
}

/* ---------- 信息流卡：微博式白卡(圆角+边框+舒适留白，与顶部发布框统一) ---------- */
.ksp-feed-card { cursor: pointer; }
.ksp-feed-card:hover { box-shadow: var(--ksp-shadow); transform: translateY(-1px); }
.ksp-feed-card .ksp-content { margin-top: 10px; }
.ksp-pill-info { background: var(--ksp-soft); color: var(--ksp-muted); }
.ksp-lv { font-size: 10px; color: var(--ksp-primary); background: var(--ksp-primary-soft); border-radius: 5px; padding: 0 5px; line-height: 15px; }
/* 画作卡首图：自然比例完整展示(宽≤440 高≤300，不拉伸不裁切)——与单图一致，作品不被裁 */
.ksp-post-img { position: relative; margin-top: 10px; border-radius: var(--ksp-radius-sm); overflow: hidden; max-width: var(--ksp-media-max); cursor: pointer; display: inline-block; }
.ksp-post-img img { max-width: 100%; max-height: 300px; width: auto; height: auto; object-fit: contain; display: block; }
/* 单图：自然比例(宽≤100% 高≤300，不拉伸不留灰边)——与 App feed 一致 */
.ksp-grid-1 { max-height: 300px; }
.ksp-grid-1 .ksp-img { max-width: 100%; max-height: 300px; width: auto; height: auto; object-fit: contain; display: block; border-radius: var(--ksp-radius-sm); }

/* ---------- 顶部内联发布框 ---------- */
.ksp-composer { background: var(--ksp-bg); border: 1px solid var(--ksp-line); border-radius: var(--ksp-radius); padding: 14px 16px; margin-bottom: 14px; transition: border-color .18s, box-shadow .18s; }
.ksp-composer.is-focus { border-color: var(--ksp-primary); box-shadow: 0 2px 12px rgba(58,63,69,.1); }
.ksp-composer-top { display: flex; gap: 12px; align-items: flex-start; }
.ksp-composer-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--ksp-soft); }
.ksp-composer-ta { flex: 1; width: 100%; border: 0; background: transparent; color: var(--ksp-fg); font-size: 15.5px; line-height: 1.6; resize: none; min-height: 44px; max-height: 200px; font-family: inherit; overflow: hidden; padding-top: 8px; }
.ksp-composer-ta:focus { outline: none; }
.ksp-composer-ta::placeholder { color: var(--ksp-muted); }
.ksp-composer-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ksp-line); }
.ksp-composer-tools { display: flex; gap: 6px; }
.ksp-composer-tools .ksp-tool { width: auto; height: 34px; padding: 0 12px; gap: 5px; border-radius: 999px; border: 0; background: var(--ksp-soft); color: var(--ksp-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; transition: background .15s, color .15s; }
.ksp-composer-tools .ksp-tool svg { width: 17px; height: 17px; }
.ksp-composer-tools .ksp-tool:hover { background: var(--ksp-primary-soft); color: var(--ksp-primary); }
.ksp-composer-send { padding: 8px 22px; font-size: 14px; }
.ksp-composer-vis { display: inline-flex; gap: 2px; background: var(--ksp-soft); border-radius: 999px; padding: 2px; }
.ksp-visbtn { border: 0; background: transparent; color: var(--ksp-muted); font-size: 12.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.ksp-visbtn.is-on { background: var(--ksp-bg); color: var(--ksp-fg); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.ksp-composer-grid { grid-template-columns: repeat(3, 1fr); max-width: 360px; }

/* ---------- 信息流卡右上角「更多」按钮 + 下拉菜单 + 举报选项 ---------- */
.ksp-more-btn { position: absolute; top: 10px; right: 6px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--ksp-fg-2); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 3; transition: background .15s, color .15s; }
.ksp-more-btn i { font-size: 20px; line-height: 1; }
.ksp-more-btn:hover { background: var(--ksp-soft); color: var(--ksp-fg); }
.ksp-menu { position: absolute; z-index: 100000; min-width: 132px; background: var(--ksp-bg); border: 1px solid var(--ksp-line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .14); padding: 6px; animation: ksp-fade .14s ease; }
.ksp-menu-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ksp-fg); font-size: 14px; padding: 8px 12px; border-radius: 7px; cursor: pointer; }
.ksp-menu-item:hover { background: var(--ksp-soft); }
.ksp-menu-item.is-danger { color: #e5484d; }
.ksp-report-reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ksp-report-reason { display: flex; align-items: center; gap: 6px; border: 1px solid var(--ksp-line); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; color: var(--ksp-fg-2); cursor: pointer; transition: border-color .15s; }
.ksp-report-reason:hover { border-color: var(--ksp-muted); }
.ksp-report-reason input { accent-color: var(--ksp-primary); margin: 0; }
@media (max-width: 520px) { .ksp-composer-vis { display: none; } }

/* 小屏 */
@media (max-width: 520px) {
  .koi-sp-page { padding: 14px 12px 60px; }
  .ksp-comment.is-child { margin-left: 30px; }
}

/* ---------- 近期关注横排 strip + 已关注标签 chips（Agent C：动态页顶部原地筛选） ---------- */
/* 横滑用 CSS overflow-x + scroll-snap，隐藏滚动条，不做 JS 滚动劫持 */
.ksp-follow-strip,
.ksp-tag-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;               /* Firefox */
  -ms-overflow-style: none;            /* 旧 Edge/IE */
}
.ksp-follow-strip::-webkit-scrollbar,
.ksp-tag-chips::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit 隐藏丑滚动条 */

/* 近期关注横排：头像 + 名字，纵向小卡 */
.ksp-follow-strip { padding: 2px 2px 12px; margin-bottom: 4px; }
.ksp-follow-ava {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 2px 0;
  cursor: pointer;
  color: var(--ksp-fg-2);
  -webkit-appearance: none;
  appearance: none;
}
.ksp-follow-ava-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ksp-soft);
  display: block;
  box-sizing: border-box;
  border: 2px solid transparent;
  transition: border-color .18s, transform .18s;
}
.ksp-follow-ava-ph { display: block; }
.ksp-follow-ava-name {
  max-width: 60px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ksp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .18s;
}
.ksp-follow-ava:hover .ksp-follow-ava-img { border-color: var(--ksp-line); }
.ksp-follow-ava.is-on .ksp-follow-ava-img { border-color: var(--ksp-primary); transform: translateY(-1px); }
.ksp-follow-ava.is-on .ksp-follow-ava-name { color: var(--ksp-fg); font-weight: 600; }

/* 「全部」头像位（strip index-0，对齐 App _allAvatar：圆环 + primary@12% 底 + feed 图标） */
.ksp-follow-all-ico { display: flex; align-items: center; justify-content: center; background: var(--ksp-primary-soft); color: var(--ksp-primary); }
.ksp-follow-all-ico i { font-size: 22px; line-height: 1; }

/* 已关注标签 chips：胶囊，全部 + 各标签 */
.ksp-tag-chips { padding: 0 2px 14px; margin-bottom: 2px; }
.ksp-tag-chip {
  scroll-snap-align: start;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--ksp-line);
  border-radius: 999px;
  background: var(--ksp-bg);
  color: var(--ksp-fg-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
  -webkit-appearance: none;
  appearance: none;
}
.ksp-tag-chip i { font-size: 14px; line-height: 1; color: var(--ksp-muted); transition: color .18s; }
.ksp-tag-chip:hover { border-color: var(--ksp-muted); color: var(--ksp-fg); }
.ksp-tag-chip.is-on {
  background: var(--ksp-primary-soft);
  color: var(--ksp-primary);
  border-color: transparent;
  font-weight: 600;
}
.ksp-tag-chip.is-on i { color: var(--ksp-primary); }

@media (max-width: 520px) {
  .ksp-follow-ava { width: 56px; }
  .ksp-follow-ava-img { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .ksp-follow-ava-img,
  .ksp-follow-ava-name,
  .ksp-tag-chip,
  .ksp-tag-chip i { transition: none; }
  .ksp-follow-ava.is-on .ksp-follow-ava-img { transform: none; }
}

/* ---------- 插入卡片 picker（发布框「插入卡片」→ 选择器模态 + 内联预览） ---------- */
/* 发布框工具条内 B2 字体图标按钮（与内联 SVG 工具按钮同尺寸对齐） */
.ksp-composer-tools .ksp-tool i { font-size: 17px; line-height: 1; }

/* 选择器模态：类型切换 + 搜索 + 结果列表 */
.ksp-cardpick-types { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.ksp-cardpick-types::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ksp-cardpick-tab { flex: 0 0 auto; border: 0; background: var(--ksp-soft); color: var(--ksp-fg-2); font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; -webkit-appearance: none; appearance: none; }
.ksp-cardpick-tab:hover { color: var(--ksp-fg); }
.ksp-cardpick-tab.is-on { background: var(--ksp-primary); color: #fff; font-weight: 600; }
.ksp-cardpick-search { display: flex; align-items: center; gap: 8px; margin-top: 12px; background: var(--ksp-soft); border-radius: 10px; padding: 0 12px; height: 40px; }
.ksp-cardpick-search i { font-size: 17px; line-height: 1; color: var(--ksp-muted); }
.ksp-cardpick-input { flex: 1; border: 0; background: transparent; color: var(--ksp-fg); font-size: 14px; font-family: inherit; outline: none; }
.ksp-cardpick-input::placeholder { color: var(--ksp-muted); }
/* ★压掉 B2 全站 input/textarea 默认边框/内阴影/原生外观(截图里那条细黑线);仅作用于我方无框输入。 */
input.ksp-cardpick-input, textarea.ksp-composer-ta {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-appearance: none;
  appearance: none;
}
.ksp-cardpick-list { margin-top: 12px; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.ksp-cardpick-empty { text-align: center; color: var(--ksp-muted); font-size: 13.5px; padding: 32px 12px; }
.ksp-cardpick-head { color: var(--ksp-muted); font-size: 12px; font-weight: 600; padding: 2px 2px 6px; }
.ksp-cardpick-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: var(--ksp-soft); border-radius: 12px; padding: 10px; cursor: pointer; transition: background .15s; -webkit-appearance: none; appearance: none; }
.ksp-cardpick-item:hover { background: var(--ksp-line); }
.ksp-cardpick-thumb { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; flex: none; background: var(--ksp-bg); }
.ksp-cardpick-thumb.is-round { border-radius: 50%; }
.ksp-cardpick-thumb-ph { display: block; }
.ksp-cardpick-meta { flex: 1; min-width: 0; }
.ksp-cardpick-type { font-size: 11.5px; color: var(--ksp-primary); font-weight: 600; }
.ksp-cardpick-title { font-size: 14px; font-weight: 600; color: var(--ksp-fg); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ksp-cardpick-author { font-size: 12px; color: var(--ksp-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ksp-cardpick-pick { font-size: 20px; line-height: 1; color: var(--ksp-primary); flex: none; }

/* 发布框内联预览：复用 .ksp-quote，加可移除按钮 */
.ksp-cardpick-slot { margin-top: 12px; }
.ksp-cardpick-preview { position: relative; }
.ksp-cardpick-preview .ksp-quote { cursor: default; margin-top: 0; }
.ksp-cardpick-preview .ksp-quote:hover { background: var(--ksp-soft); }
.ksp-cardpick-preview .ksp-grid { max-height: 160px; }
.ksp-cardpick-remove { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(20, 22, 26, .62); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .15s; }
.ksp-cardpick-remove i { font-size: 13px; line-height: 1; }
.ksp-cardpick-remove:hover { background: rgba(20, 22, 26, .82); }

@media (prefers-reduced-motion: reduce) {
  .ksp-cardpick-tab,
  .ksp-cardpick-item,
  .ksp-cardpick-remove { transition: none; }
}