/* 心声弹层重设计：居中构图 + 引号卡 + 好感圆环（52 心声刷新） */

/* ============ 卡片氛围 ============ */
#heartBackdrop .center-card{ position:relative; overflow:hidden; }
#heartBackdrop .center-card::before{
  content:""; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:280px; height:220px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,143,171,.10), transparent 72%);
}

html[data-theme="dark"] .heart-avatar-wrap::before{
  background:radial-gradient(circle, rgba(255,143,171,.20), transparent 62%);
}
html[data-theme="dark"] .heart-avatar, html[data-theme="dark"] .heart-avatar-initial{
  box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 0 3px var(--bg), 0 0 0 4.5px rgba(255,143,171,.32);
}

/* ============ 头部：头像 + 名字时间在左，好感圆环在右 ============ */
.heart-head{
  display:flex; align-items:center; gap:13px;
  padding:4px 20px 0; position:relative;
}
.heart-avatar-wrap{ position:relative; width:64px; height:64px; margin-bottom:0; flex:none; }
.heart-avatar-wrap::before{
  content:""; position:absolute; inset:-14px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,143,171,.14), transparent 68%);
}
.heart-avatar, .heart-avatar-initial{
  width:64px; height:64px;
  box-shadow:0 8px 22px rgba(11,11,15,.14), 0 0 0 3px var(--bg), 0 0 0 4.5px rgba(255,143,171,.28);
}
.heart-avatar-badge{
  position:absolute; right:-2px; bottom:-2px;
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(150deg, #ffc2d1, #ff8fab);
  color:#fff; font-size:11px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2.5px var(--bg), 0 3px 8px rgba(255,143,171,.35);
}
.heart-info{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.heart-name-row{ display:flex; align-items:center; justify-content:flex-start; gap:7px; max-width:100%; min-width:0; }
.heart-name{ font-size:16.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.heart-past-tag{
  flex:none; font-size:10.5px; font-weight:600; margin-left:0;
  color:#ff8fab; background:rgba(255,143,171,.10);
  padding:2.5px 9px; border-radius:999px;
}
.heart-sub{ font-size:11.5px; color:var(--gray-2); margin-top:3px; font-variant-numeric:tabular-nums; }

/* 右侧好感圆环（由 JS 从正文搬进头部） */
.heart-fav-side{
  flex:none; align-self:center;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  width:88px;
}
.heart-fav-side:empty{ display:none; }
.heart-fav-side .heart-fav-block{ margin-top:0; }
.heart-fav-side .heart-fav-ring-wrap{ width:66px; height:66px; }
.heart-fav-side .heart-fav-ring{ width:66px; height:66px; }
.heart-fav-side .heart-fav-ring-wrap .heart-fav-num{
  flex-direction:column; gap:1px; font-size:17px;
}
.heart-fav-side .heart-fav-cap{ margin-top:0; font-size:9.5px; letter-spacing:.04em; }

/* ============ 正文 ============ */
#heartBody{ padding:0 20px; }
.heart-moment{ display:flex; gap:9px; align-items:flex-start; margin-top:15px; }
.heart-moment-label{
  flex:none; font-size:10.5px; letter-spacing:.12em; color:var(--gray-2);
  padding:3.5px 10px; border-radius:999px; background:var(--fill); margin-top:2px;
}
.heart-moment-text{
  font-size:13px; line-height:1.7; color:var(--gray-1);
  padding-top:2.5px; white-space:pre-wrap; word-break:break-word; min-width:0;
}
.heart-quote{
  position:relative; margin-top:13px;
  padding:20px 18px 16px 22px;
  border-radius:6px 22px 22px 22px;
  background:linear-gradient(155deg, rgba(255,143,171,.075), rgba(255,194,209,.055) 55%, rgba(255,194,209,.025));
  box-shadow:inset 0 0 0 1px rgba(255,143,171,.10);
}
.heart-quote-mark{
  position:absolute; top:-8px; left:13px;
  font-family:Georgia, "Times New Roman", serif; font-size:46px; line-height:1;
  color:rgba(255,143,171,.4); pointer-events:none;
}
.heart-voice{ font-size:15.5px; line-height:1.85; color:var(--ink); white-space:pre-wrap; word-break:break-word; }
.heart-trans{
  margin-top:9px; padding:7px 11px; border-radius:10px;
  font-size:12.5px; line-height:1.55;
  color:var(--sk-trans-ink, var(--gray-1));
  background:rgba(var(--tint-rgb),.045);
  border:1px dashed rgba(var(--tint-rgb),.16);
  white-space:pre-wrap; word-break:break-word;
}
#heartBody .heart-trans:empty{ display:none; }

/* ============ 好感圆环 ============ */
.heart-fav-block{ margin-top:18px; display:flex; flex-direction:column; align-items:center; }
.heart-fav-ring-wrap{ position:relative; width:86px; height:86px; }
.heart-fav-ring{ display:block; width:86px; height:86px; transform:rotate(-90deg); }
.heart-fav-ring .track{ fill:none; stroke:rgba(var(--tint-rgb),.07); stroke-width:6.5; }
.heart-fav-ring .val{
  fill:none; stroke:url(#heartRingGrad); stroke-width:6.5; stroke-linecap:round;
  stroke-dasharray:219.9; stroke-dashoffset:219.9;
  transition:stroke-dashoffset .9s var(--ease-out) .15s;
}
.heart-fav-ring-wrap .heart-fav-num{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-num); font-size:24px; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.heart-fav-cap{ margin-top:8px; font-size:11.5px; letter-spacing:.08em; color:var(--gray-2); }
.heart-fav-delta{
  font-size:9.5px; font-weight:700; font-variant-numeric:tabular-nums;
  padding:1px 6px; border-radius:999px; white-space:nowrap; line-height:1.4;
}
.heart-fav-delta.up{ color:#ff8fab; background:rgba(255,143,171,.10); }
.heart-fav-delta.down{ color:#8E8E93; background:rgba(var(--tint-rgb),.07); }

/* ============ 加载 / 空状态 ============ */
.heart-loading{ text-align:center; font-size:13px; color:var(--gray-2); padding:30px 0 22px; }
.heart-loading .beat{
  display:inline-block; margin-right:7px; color:#ff8fab;
  animation:heartBeat 1.15s ease-in-out infinite; transform-origin:center;
}
@keyframes heartBeat{
  0%,100%{ transform:scale(1); }
  22%{ transform:scale(1.28); }
  38%{ transform:scale(1); }
  54%{ transform:scale(1.18); }
}

/* ============ 过往记录：时间线 ============ */
.heart-log{ margin:14px 22px 0; max-height:184px; overflow-y:auto; display:none; }
.heart-log.show{ display:block; }
.heart-log-item{
  position:relative;
  padding:9px 12px 10px 17px; border-radius:14px; background:var(--fill);
  margin-bottom:6px; cursor:pointer; font-size:12.5px; line-height:1.55;
  transition:transform .18s var(--spring), background .18s, color .18s;
}
.heart-log-item::before{
  content:""; position:absolute; left:7px; top:16px;
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,143,171,.45);
}
.heart-log-item:active{ transform:scale(.985); }
.heart-log-item.on{ background:var(--ink); color:var(--on-ink); }
.heart-log-item.on::before{ background:#ffc2d1; }
.heart-log-meta{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.heart-log-meta small{ color:var(--gray-2); font-size:11px; font-variant-numeric:tabular-nums; }
.heart-log-item.on .heart-log-meta small{ color:rgba(var(--tint-rgb),.55); }
html[data-theme="dark"] .heart-log-item.on .heart-log-meta small{ color:rgba(255,255,255,.5); }
.heart-log-fav{
  margin-left:auto; font-size:10.5px; font-weight:700;
  color:#ff8fab; background:rgba(255,143,171,.10);
  padding:1.5px 8px; border-radius:999px;
}
.heart-log-item.on .heart-log-fav{ color:#fff; background:rgba(255,143,171,.55); }
.heart-log-text{
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  word-break:break-word;
}
.heart-log-empty{ font-size:12.5px; color:var(--gray-2); text-align:center; padding:10px 0; }

/* ============ 底部操作：左侧轻量文字键 + 右侧渐变胶囊 ============ */
.heart-actions{ display:flex; align-items:center; gap:8px; padding:14px 20px 2px; }
.heart-btn{
  border:0; height:40px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:transform .22s var(--spring), box-shadow .22s, opacity .2s, background .2s;
}
.heart-btn:active{ transform:scale(.94); }
.heart-btn.ghost{
  background:transparent; color:var(--gray-1); padding:0 10px;
}
.heart-btn.ghost:active{ background:var(--fill); }
.heart-btn.ghost svg{ flex:none; opacity:.75; }
.heart-btn.solid{
  margin-left:auto; padding:0 24px;
  background:linear-gradient(135deg, #ffc2d1, #ff8fab);
  color:#fff;
  box-shadow:0 6px 16px rgba(255,143,171,.30);
}
html[data-theme="dark"] .heart-btn.solid{ box-shadow:0 6px 16px rgba(255,143,171,.22); }

/* 1.7.45: white paper surface, muted rose accents, untinted avatar. */
#heartBackdrop .center-card{--bg:#fff;--ink:#222329;--on-ink:#fff;--fill:#f4f4f6;--gray-1:#73737c;--gray-2:#92929b;background:#fff!important;color:var(--ink)}
#heartBackdrop .center-card::before,#heartBackdrop .heart-avatar-wrap::before{display:none!important;background:none!important}
#heartBackdrop .heart-avatar{filter:none!important;mix-blend-mode:normal;opacity:1}
#heartBackdrop .heart-avatar,#heartBackdrop .heart-avatar-initial{box-shadow:0 2px 9px #0000000c,0 0 0 3px #fff,0 0 0 4px #ffc2d1}
#heartBackdrop .heart-avatar-badge{background:#ff8fab;box-shadow:0 0 0 2.5px #fff}
#heartBackdrop .heart-btn.solid{background:#ff8fab;box-shadow:none!important;filter:none!important}
#heartBackdrop .heart-fav-ring .val{stroke:#ff8fab}

/* 1.7.65 scoped dark thoughts */
#heartBody .heart-dark{margin:18px 0 8px;padding-top:18px;border-top:1px solid #e9e6e9}
#heartBody .heart-dark-toggle{display:block;position:relative;width:100%;padding:18px;text-align:left;border:1px solid #e9e6ec;border-radius:16px;background:#f6f4f7;color:#514b59;font:inherit;cursor:pointer}
#heartBody .heart-dark-veil{display:block;filter:blur(5px);user-select:none;line-height:1.9;opacity:.6}
#heartBody .heart-dark-hint{display:block;font-size:11px;letter-spacing:1px;text-align:right;color:#8c8293;margin-top:10px}
#heartBody .heart-dark-content{display:block;white-space:pre-wrap;line-height:1.8;font-size:14px}
#heartBody .heart-dark-empty{font-size:12px;color:#999;padding:16px 0}
#heartBody .heart-dark-toggle:focus-visible{outline:2px solid #91839c;outline-offset:3px}