/* ============================================================
 *  SourceVault v6.6.0 · 新增组件样式
 * ------------------------------------------------------------
 *  单独一个文件，前台和后台都引它 —— 这样后台的发布表单、
 *  复制链接按钮也能有样式，又不会把后台原来的观感改掉。
 * ============================================================ */

/* ═══════════════════════════════════════════════════════════
 *  v6.6.0 新增样式
 *   1) 点赞 / 收藏：默认白，点过之后变红
 *   2) 评论区气泡 = 聊天室气泡（同一个观感）
 *   3) 发布表单「怎么给」三选一
 *   4) 复制链接按钮 / 提示条 / 专属链接面板
 * ═══════════════════════════════════════════════════════════ */

/* ---------- 1) 点赞 / 收藏的两种状态 ---------- */
:root { --like-on: #e0245e; }

/* 默认白色：图标是白的，外圈加一点点阴影，浅色背景上也看得清轮廓 */
.sv-actbar .like-btn .sv-ic,
.sv-actbar .btn[data-fav] .sv-ic,
.moment-btn.like-btn .mh,
.moment-btn.fav-btn .mh {
  color: #ffffff;
  filter: drop-shadow(0 0 1px rgba(17, 24, 39, .75)) drop-shadow(0 0 3px rgba(17, 24, 39, .35));
}

/* 点过之后：图标和数字一起变红 */
.sv-actbar .like-btn.on, .sv-actbar .btn[data-fav].on { color: var(--like-on); }
.moment-btn.like-btn.on, .moment-btn.fav-btn.on { color: var(--like-on); font-weight: 600; background: none; }
.sv-actbar .like-btn.on .sv-ic,
.sv-actbar .btn[data-fav].on .sv-ic,
.moment-btn.like-btn.on .mh,
.moment-btn.fav-btn.on .mh {
  color: var(--like-on);
  filter: none;
}
.sv-actbar .like-btn.on, .sv-actbar .btn[data-fav].on {
  border-color: color-mix(in srgb, var(--like-on) 45%, transparent);
  background-color: color-mix(in srgb, var(--like-on) 10%, transparent);
}
.sv-actbar .btn[data-fav] .fav-num, .sv-actbar .like-btn .like-num { margin-left: 3px; }
.moment-btn.is-static { cursor: default; }

/* 收藏名单：跟点赞名单同一条样式，星号换个颜色 */
.moment-favbox .mh { color: #f59f00; font-size: 12px; line-height: 1.7; }
.moment-favbox span:last-child { color: #b26a00; flex: 1; }

/* ---------- 2) 评论区气泡：跟聊天室一模一样 ---------- */
.moment-cmts .chat-msg { gap: 9px; padding: 5px 0; }
.moment-cmts .chat-msg .chat-msg-body { max-width: 84%; text-align: left; }
.moment-cmts .chat-msg .chat-msg-head { margin-bottom: 3px; }
.moment-cmts .chat-msg .chat-msg-bubble { font-size: 13.5px; line-height: 1.6; }
.moment-cmts .chat-msg.mine .chat-msg-body { text-align: right; }
.moment-cmts .chat-msg.mine .chat-msg-head { justify-content: flex-end; }
.moment-cmts .chat-msg.is-pinned .chat-msg-bubble {
  border-color: color-mix(in srgb, #e8590c 45%, transparent);
}
.moment-cmts .chat-msg-head .sv-chip { transform: scale(.94); transform-origin: left center; }
.moment-cmts .chat-msg-head .sv-titles { transform: scale(.94); transform-origin: left center; }
.moment-cmts .chat-msg .sv-mgr { margin-left: auto; align-self: center; }
/* 老结构（万一还有别处用）：也不再是「名字：内容」那种一行字了 */
.moment-cmt-line { font-size: 13px; line-height: 1.6; }
.moment-cmt-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 3px; }

/* ---------- 3) 发布表单：怎么给，三选一 ---------- */
.sv-mode { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.sv-mode-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 12px;
  border: 1px solid var(--glass-line, rgba(127, 138, 155, .25));
  background: rgba(127, 138, 155, .10);
  color: var(--text-2, #334155);
  cursor: pointer; font-size: 13.5px; line-height: 1;
  transition: background .16s, color .16s, border-color .16s;
}
.sv-mode-btn:hover { border-color: color-mix(in srgb, var(--brand, #2563eb) 40%, transparent); }
.sv-mode-btn.on { background: var(--brand, #2563eb); border-color: transparent; color: #fff; font-weight: 600; }
.sv-mode-btn.on .sv-ic { color: #fff; }
/* 选完之后没选中的那块整块收起来，页面上就只剩该填的框 */
[data-mode-box][hidden] { display: none !important; }

/* ---------- 4) 复制链接 / 提示 / 专属链接面板 ---------- */
.sv66-toast {
  position: fixed; left: 50%; bottom: 92px; z-index: 9999;
  transform: translate(-50%, 12px);
  max-width: 86vw; padding: 10px 16px; border-radius: 12px;
  background: rgba(17, 24, 39, .93); color: #fff;
  font-size: 13.5px; line-height: 1.5; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.sv66-toast.on { opacity: 1; transform: translate(-50%, 0); }

.sv-link-mini {
  width: 140px; max-width: 100%; font-size: 11px; padding: 4px 7px;
  border-radius: 8px; border: 1px solid var(--glass-line, rgba(127, 138, 155, .25));
  background: rgba(127, 138, 155, .10); color: var(--muted);
}
.mylink-row { display: flex; gap: 8px; align-items: center; margin: 9px 0 6px; }
.mylink-row input {
  flex: 1 1 auto; min-width: 0; padding: 9px 11px; font-size: 12.5px;
  border-radius: 10px; border: 1px solid var(--glass-line, rgba(127, 138, 155, .25));
  background: rgba(127, 138, 155, .10); color: var(--text-2, #334155);
}
.share-mylink { padding: 13px 15px; margin: 14px 0; }
.share-mylink h3 { margin: 0 0 4px; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.sv66-tip h2 { display: flex; align-items: center; gap: 7px; }

@media (max-width: 720px) {
  .sv-link-mini { width: 104px; }
  .mylink-row { flex-wrap: wrap; }
  .sv-mode-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- 5) 首页滚动图的后台编辑列表 ---------- */
.car-edit { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 6px; }
.car-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: 12px;
  border: 1px solid var(--glass-line, rgba(127, 138, 155, .25));
  background: rgba(127, 138, 155, .08);
}
.car-item img {
  width: 108px; height: 46px; object-fit: cover; border-radius: 9px; flex: 0 0 auto;
  background: rgba(127, 138, 155, .16);
}
.car-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.car-item-main input {
  width: 100%; padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--glass-line, rgba(127, 138, 155, .25));
  background: rgba(255, 255, 255, .06); color: var(--text-2, #334155); font-size: 13px;
}
.car-item-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-item-del { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--bad, #e03131); flex: 0 0 auto; }
@media (max-width: 720px) {
  .car-item { flex-wrap: wrap; }
  .car-item img { width: 100%; height: 78px; }
}
.card-fav { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); margin-left: 6px; }
.pdd-sold + .card-fav { margin-left: 8px; }