/*
 * 反馈回函：持续存在、由成员主动打开的未读坐标。
 * 04 的单一汇聚方向、05 的透明叠层和 06 的锚点语法被收束在局部，不做遮屏演出。
 */

.feedback-reply-anchor-layer {
  --reply-surface: rgba(8, 17, 21, 0.96);
  --reply-layer: rgba(35, 65, 72, 0.72);
  --reply-line: #a8d5dc;
  --reply-pulse: var(--accent);
  position: fixed;
  z-index: 39;
  right: clamp(18px, 2.3vw, 44px);
  bottom: clamp(92px, 11vh, 138px);
  width: max-content;
  max-width: calc(100vw - 24px);
  transition: bottom 320ms var(--ease-ceremonial);
}

body:has(#white-oath-anchor-layer:not([hidden])) .feedback-reply-anchor-layer {
  bottom: clamp(176px, 20vh, 228px);
}

.feedback-reply-anchor-layer[hidden] { display: none; }

.feedback-reply-anchor {
  position: relative;
  display: grid;
  width: min(318px, calc(100vw - 24px));
  min-height: 76px;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 8px 10px 8px 7px;
  border: 0;
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  filter: drop-shadow(0 15px 28px rgba(0, 0, 0, 0.26));
  text-align: left;
  isolation: isolate;
}

.feedback-reply-anchor::before,
.feedback-reply-anchor::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.feedback-reply-anchor::before {
  inset: 8px 21px 7px 20px;
  border: 1px solid color-mix(in srgb, var(--reply-line) 34%, transparent);
  background:
    linear-gradient(101deg, transparent 0 5%, rgba(255, 255, 255, 0.035) 5% 5.4%, transparent 5.4%),
    linear-gradient(112deg, var(--reply-surface), color-mix(in srgb, var(--reply-layer) 34%, var(--reply-surface)) 72%, var(--reply-surface));
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 48%, calc(100% - 26px) 100%, 12px 100%, 0 calc(100% - 12px));
  transition: border-color 180ms ease, transform 320ms var(--ease-ceremonial);
}

.feedback-reply-anchor::after {
  right: 5px;
  bottom: 7px;
  width: 112px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--reply-line) 45%, var(--reply-pulse));
  clip-path: polygon(0 25%, 76% 25%, 82% 0, 100% 50%, 82% 100%, 76% 75%, 0 75%);
  transform-origin: right;
  transition: transform 360ms var(--ease-ceremonial);
}

.feedback-reply-anchor:hover::before,
.feedback-reply-anchor:focus-visible::before {
  border-color: color-mix(in srgb, var(--reply-line) 72%, transparent);
  transform: translateX(-4px);
}

.feedback-reply-anchor:hover::after,
.feedback-reply-anchor:focus-visible::after { transform: scaleX(1.16); }

.feedback-reply-anchor:focus-visible {
  outline: 2px solid var(--reply-pulse);
  outline-offset: 5px;
}

.feedback-reply-anchor__mark {
  position: relative;
  display: block;
  width: 68px;
  height: 62px;
}

.feedback-reply-anchor__mark > i,
.feedback-reply-anchor__mark > b {
  position: absolute;
  display: block;
  width: 44px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--reply-line) 52%, transparent);
  background: color-mix(in srgb, var(--reply-surface) 74%, transparent);
  content: "";
  transform: skewX(-14deg);
}

.feedback-reply-anchor__mark > i:first-child { top: 7px; left: 8px; opacity: 0.46; }
.feedback-reply-anchor__mark > i:nth-child(2) { top: 14px; left: 14px; opacity: 0.76; }
.feedback-reply-anchor__mark > b {
  top: 21px;
  left: 20px;
  border-color: color-mix(in srgb, var(--reply-pulse) 66%, transparent);
  background: linear-gradient(142deg, color-mix(in srgb, var(--reply-layer) 70%, transparent), var(--reply-surface));
}

.feedback-reply-anchor__mark svg {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--reply-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.feedback-reply-anchor__mark circle {
  fill: var(--reply-pulse);
  stroke: var(--reply-surface);
  stroke-width: 2;
}

.feedback-reply-anchor__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding-block: 6px;
}

.feedback-reply-anchor__copy small {
  color: var(--reply-line);
  font: 530 9px/1.2 var(--font-display);
  letter-spacing: 0.13em;
}

.feedback-reply-anchor__copy b {
  overflow: hidden;
  font: 610 13px/1.3 var(--font-ui);
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-reply-anchor__copy > span {
  overflow: hidden;
  color: var(--text-2);
  font: 430 10px/1.35 var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-reply-anchor__count {
  display: grid;
  min-width: 23px;
  height: 23px;
  place-items: center;
  padding-inline: 5px;
  border: 2px solid var(--reply-surface);
  border-radius: 50%;
  background: var(--reply-pulse);
  color: #f7fbfb;
  font: 660 9px/1 var(--font-ui);
  font-style: normal;
}

.feedback-reply-anchor-layer.is-new .feedback-reply-anchor {
  animation: feedback-reply-arrive 440ms var(--ease-ceremonial) both;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .feedback-reply-anchor-layer {
  --reply-surface: color-mix(in srgb, var(--garden-sheet-strong) 96%, #1c1528);
  --reply-layer: color-mix(in srgb, var(--garden-violet) 40%, var(--garden-sheet));
  --reply-line: color-mix(in srgb, var(--garden-gold) 72%, var(--garden-silver));
  --reply-pulse: var(--garden-violet);
}

@media (min-width: 2500px) {
  .feedback-reply-anchor-layer {
    right: clamp(38px, 3.4vw, 94px);
    bottom: clamp(126px, 12vh, 190px);
  }

  body:has(#white-oath-anchor-layer:not([hidden])) .feedback-reply-anchor-layer {
    bottom: clamp(222px, 21vh, 300px);
  }
}

@media (max-width: 600px) {
  .feedback-reply-anchor-layer {
    right: 12px;
    bottom: max(78px, calc(env(safe-area-inset-bottom) + 68px));
  }

  body:has(#white-oath-anchor-layer:not([hidden])) .feedback-reply-anchor-layer {
    bottom: max(150px, calc(env(safe-area-inset-bottom) + 140px));
  }

  .feedback-reply-anchor {
    width: 66px;
    min-height: 64px;
    grid-template-columns: 1fr;
    padding: 0;
  }

  .feedback-reply-anchor::before,
  .feedback-reply-anchor::after { display: none; }

  .feedback-reply-anchor__mark { width: 64px; height: 60px; }

  .feedback-reply-anchor__copy {
    position: absolute;
    right: 56px;
    bottom: 1px;
    width: min(228px, calc(100vw - 82px));
    padding: 10px 15px 11px;
    border: 1px solid color-mix(in srgb, var(--reply-line) 38%, transparent);
    background: var(--reply-surface);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    pointer-events: none;
    animation: feedback-reply-mobile-copy 5.4s ease forwards;
  }

  .feedback-reply-anchor__count {
    position: absolute;
    z-index: 3;
    top: -5px;
    right: -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-reply-anchor-layer,
  .feedback-reply-anchor,
  .feedback-reply-anchor::before,
  .feedback-reply-anchor::after { transition: none; }
  .feedback-reply-anchor-layer.is-new .feedback-reply-anchor,
  .feedback-reply-anchor__copy { animation: none; }
}

@keyframes feedback-reply-arrive {
  from { opacity: 0; transform: translate3d(16px, 5px, 0); }
  52% { opacity: 1; }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes feedback-reply-mobile-copy {
  0%, 68% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(8px); visibility: hidden; }
}