/* ============================================================
   线下模板 · 水墨远山（skin = ink）
   ------------------------------------------------------------
   启用方式（二选一）：
     1. 线下聊天 → 右上「…」→ 美化方案 → 点「水墨 · 远山」
     2. 控制台：localStorage.setItem('hugyun_vn_skin','ink') 后刷新
   关闭：美化方案里再点一次，或把 skin 改回 qingshan

   作用域：.vn-layer[data-vn-skin="ink"]
   只依赖底座 DOM 契约（vn-bubble / vn-avatar / vn-name / vn-para …），
   不改任何 JS 逻辑。
   ============================================================ */

/* ---------- 0. 令牌 ---------- */
.vn-layer[data-vn-skin="ink"] {
  --vn-paper: #f2ead9;
  --vn-paper-2: #e9dfc9;
  --vn-ink: #221d17;
  --vn-ink-2: #4a4136;
  --vn-red: #9d3527;
  --vn-kai: 'KaiTi', 'STKaiti', '楷体', 'Kaiti SC', serif;
  --vn-song: 'Songti SC', 'STSong', 'SimSun', '宋体', serif;

  /* 底座气泡外观全部清空，只留字 */
  --vn-bubble-bg: transparent;
  --vn-bubble-bg-url: none;
  --vn-bubble-border: transparent;
  --vn-bubble-radius: 0;
  --vn-bubble-shadow: none;
  --vn-text-color: var(--vn-ink);

  background: #14110c;
}

/* ---------- 1. 背景 ---------- */
.vn-layer[data-vn-skin="ink"] .vn-stage-bg {
  background: radial-gradient(130% 80% at 50% -10%, #2c2619 0%, #1a1610 55%, #100d09 100%);
}
.vn-layer[data-vn-skin="ink"] .vn-bg-image,
.vn-layer[data-vn-skin="ink"] .vn-bg-tint,
.vn-layer[data-vn-skin="ink"] .vn-bg-grain,
.vn-layer[data-vn-skin="ink"] .vn-bg-vignette {
  display: none;
}

/* 左侧竖排书法：固定在舞台，不随信息流滚动 */
.vn-layer[data-vn-skin="ink"] .vn-stage::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 76px;
  width: 104px;
  height: 176px;
  background: url("assets/ink-calli.webp") center / contain no-repeat;
  opacity: .55;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
  pointer-events: none;
  z-index: 4;
}

/* ---------- 2. HUD ---------- */
.vn-layer[data-vn-skin="ink"] .vn-hud {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}
.vn-layer[data-vn-skin="ink"] .vn-hud-title {
  font-family: var(--vn-kai);
  font-size: 16px;
  letter-spacing: .34em;
  color: #efe6d3;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.vn-layer[data-vn-skin="ink"] .vn-hud-meta {
  font-family: var(--vn-kai);
  font-size: 9.5px;
  letter-spacing: .22em;
  color: rgba(239, 230, 211, .55);
}
.vn-layer[data-vn-skin="ink"] .vn-hud-back,
.vn-layer[data-vn-skin="ink"] .vn-hud-menu {
  color: #efe6d3;
  background: rgba(20, 17, 12, .35);
  border: 1px solid rgba(239, 230, 211, .18);
}

/* ---------- 3. 信息流 ---------- */
.vn-layer[data-vn-skin="ink"] .vn-feed {
  padding: 10px 10px 30px;
  background: transparent;
}
.vn-layer[data-vn-skin="ink"] .vn-row {
  position: relative;
  display: block;
  margin: 0 0 30px;
}
.vn-layer[data-vn-skin="ink"] .vn-bubble-wrap {
  width: 100%;
}

/* ---------- 4. 卡片 ＝ 一封摊开的信 ---------- */
.vn-layer[data-vn-skin="ink"] .vn-bubble {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 344px;
  margin: 0 auto;
  padding: 168px 20px 18px;
  border: none;
  border-radius: 3px;
  background: var(--vn-paper) url("assets/card-mid.webp") center top / 100% auto repeat-y;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* 卡头：朱日 + 远山 */
.vn-layer[data-vn-skin="ink"] .vn-bubble::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 162px;
  background: url("assets/card-head.webp") center top / 100% auto no-repeat;
  border-radius: 3px 3px 0 0;
  pointer-events: none;
  z-index: 0;
}

/* 卡头与纸身的接缝 */
.vn-layer[data-vn-skin="ink"] .vn-bubble::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;
  height: 22px;
  background: linear-gradient(180deg, rgba(242, 234, 217, 0) 0%, rgba(242, 234, 217, .85) 55%, var(--vn-paper) 100%);
  pointer-events: none;
  z-index: 1;
}

/* 用户卡：同一套纸，收窄、靠右 */
.vn-layer[data-vn-skin="ink"] .vn-row--user .vn-bubble {
  max-width: 300px;
  margin: 0 0 0 auto;
  padding: 150px 18px 16px;
  opacity: .96;
}
.vn-layer[data-vn-skin="ink"] .vn-row--user .vn-bubble::before { height: 144px; }
.vn-layer[data-vn-skin="ink"] .vn-row--user .vn-bubble::after { top: 132px; }

/* ---------- 5. 头像：墨团蒙版 ---------- */
.vn-layer[data-vn-skin="ink"] .vn-avatar {
  position: absolute;
  left: 50%;
  top: -34px;
  width: 236px;
  height: 278px;
  margin-left: -118px;
  z-index: 3;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: linear-gradient(160deg, #3b332a 0%, #1b1712 60%, #100d0a 100%);
  -webkit-mask: url("assets/ink-blot.webp") center / contain no-repeat;
  mask: url("assets/ink-blot.webp") center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
}
.vn-layer[data-vn-skin="ink"] .vn-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  opacity: .92;
}
.vn-layer[data-vn-skin="ink"] .vn-row--user .vn-avatar { display: none; }

/* ---------- 6. 名字 / 时间 ---------- */
.vn-layer[data-vn-skin="ink"] .vn-bubble-head {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 0 10px;
}
.vn-layer[data-vn-skin="ink"] .vn-name {
  font-family: var(--vn-kai);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--vn-red);
  background: none;
  padding: 0;
}
.vn-layer[data-vn-skin="ink"] .vn-row--bot .vn-name::before { content: "【"; }
.vn-layer[data-vn-skin="ink"] .vn-row--bot .vn-name::after { content: "】"; }
.vn-layer[data-vn-skin="ink"] .vn-row--user .vn-name {
  color: #7d6f5c;
  font-size: 12px;
}
.vn-layer[data-vn-skin="ink"] .vn-row--user .vn-name::before { content: "—— "; }
.vn-layer[data-vn-skin="ink"] .vn-time {
  float: right;
  font-family: var(--vn-song);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: #b3a48c;
  background: none;
  padding: 0;
}

/* ---------- 7. 正文 ---------- */
.vn-layer[data-vn-skin="ink"] .vn-bubble-body {
  position: relative;
  z-index: 2;
}
.vn-layer[data-vn-skin="ink"] .vn-para {
  font-family: var(--vn-song);
  font-size: 14.5px;
  line-height: 1.95;
  letter-spacing: .02em;
  color: var(--vn-ink);
  text-indent: 0;
  margin: 0 0 9px;
}
.vn-layer[data-vn-skin="ink"] .vn-para:last-child { margin-bottom: 0; }

/* ---------- 8. 思维链：朱红小字 ---------- */
.vn-layer[data-vn-skin="ink"] .vn-think {
  font-family: var(--vn-kai);
  font-size: 12px;
  line-height: 1.85;
  color: var(--vn-red);
  opacity: .82;
  padding: 0 0 8px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgba(157, 53, 39, .24);
}
.vn-layer[data-vn-skin="ink"] .vn-think::before {
  content: "念 · ";
  letter-spacing: .2em;
}

/* ---------- 9. 卡片（profile / note / ticket / photo） ---------- */
.vn-layer[data-vn-skin="ink"] .vn-card {
  background: rgba(252, 248, 238, .92);
  border: 1px solid rgba(34, 29, 23, .16);
  border-radius: 2px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .16);
  color: var(--vn-ink);
}
.vn-layer[data-vn-skin="ink"] .vn-card-kicker,
.vn-layer[data-vn-skin="ink"] .vn-fact-key {
  font-family: var(--vn-kai);
  color: var(--vn-red);
  opacity: .8;
}
.vn-layer[data-vn-skin="ink"] .vn-card-title {
  font-family: var(--vn-kai);
  color: var(--vn-ink);
}

/* ---------- 10. 心声：墨团按钮 + 家书弹层 ---------- */
.vn-layer[data-vn-skin="ink"] .vn-heart {
  left: 16px;
  bottom: 18px;
  width: 92px;
  height: 104px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: #1d1813 url("assets/ink-blot.webp") center / contain no-repeat;
  font-family: var(--vn-kai);
  font-size: 13px;
  letter-spacing: .18em;
  color: #efe6d3;
  -webkit-mask: url("assets/ink-blot.webp") center / contain no-repeat;
  mask: url("assets/ink-blot.webp") center / contain no-repeat;
  animation: ink-breathe 4.6s ease-in-out infinite;
}
@keyframes ink-breathe {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50%      { transform: rotate(-3deg) scale(1.04); }
}
.vn-layer[data-vn-skin="ink"] .vn-letter {
  background: rgba(16, 13, 9, .72);
  backdrop-filter: blur(2px);
}
.vn-layer[data-vn-skin="ink"] .vn-letter-paper {
  background: var(--vn-paper) url("assets/card-mid.webp") center top / 100% auto repeat-y;
  border-radius: 2px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .6);
  color: var(--vn-ink);
}
.vn-layer[data-vn-skin="ink"] .vn-letter-eyebrow,
.vn-layer[data-vn-skin="ink"] .vn-letter-title {
  font-family: var(--vn-kai);
  color: var(--vn-red);
}
.vn-layer[data-vn-skin="ink"] .vn-letter-quote {
  font-family: var(--vn-song);
  line-height: 2;
}

/* ---------- 11. 工具条 / 滚动条 ---------- */
.vn-layer[data-vn-skin="ink"] .vn-tools { display: none; }
.vn-layer[data-vn-skin="ink"] .vn-feed { scrollbar-width: thin; }
.vn-layer[data-vn-skin="ink"] .vn-feed::-webkit-scrollbar { width: 2px; display: block !important; }
.vn-layer[data-vn-skin="ink"] .vn-feed::-webkit-scrollbar-thumb {
  background: rgba(239, 230, 211, .22);
  border-radius: 2px;
}

/* ---------- 12. 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .vn-layer[data-vn-skin="ink"] .vn-heart { animation: none; }
}