/**
 * @ 提及建议列表（弹幕/私信共用视觉）
 * 目标：主站 + 桌台完全一致，避免各页面内联重复定义导致分叉
 */

.mention-suggestions {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  /* 统一磨砂玻璃底色（容器与每一行保持一致，避免顶部/底部出现“黑影”差异） */
  --mention-glass-bg: rgba(20, 20, 20, 0.55);
  background: var(--mention-glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 5px;
  display: none;
  z-index: 10000;
  pointer-events: auto;
  backdrop-filter: blur(10px);
  -webkit-overflow-scrolling: touch;
  /* iOS/微信：更接近“闹钟滚轮”的顺滑滚动体验 */
  overscroll-behavior: contain;
  touch-action: pan-y;
  scroll-snap-type: y proximity;
  scroll-padding-top: 44px;
  scroll-padding-bottom: 44px;
}

/* 桌台：长按弹出 @ 列表时，微信会出现“粘贴/复制”菜单遮挡；
 * 通过增加 margin-bottom 把列表整体上移，避免被遮住。 */
.mention-suggestions.from-longpress {
  margin-bottom: 52px;
}

.mention-suggestions.show {
  display: block;
}

.mention-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  /* 统一磨砂玻璃卡片背景（所有用户一致） */
  background: var(--mention-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.12s ease, opacity 0.12s ease;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  /* 让滚动停下时更像 iOS “一格一格”落位 */
  scroll-snap-align: center;
}

.mention-item:hover {
  /* 背景保持一致，避免“每个用户不一样” */
  background: var(--mention-glass-bg);
}

.mention-item.selected {
  /* 选中态不要改背景，只通过滚轮缩放/透明度或容器中线高亮来表达 */
  background: var(--mention-glass-bg);
}

.mention-item .mention-name {
  color: #ff6699;
  font-weight: 700;
}

/* ================================
 * iOS 闹钟风格“滚轮选择器”模式
 * 通过 JS 给容器加 .mention-wheel 启用
 * ================================ */
.mention-suggestions.mention-wheel {
  /* 让滚动停下时更像“滚轮”卡位 */
  scroll-snap-type: y mandatory;
  /* 固定行高与可视行数，保证“居中选中”可计算且一致 */
  --mw-item-h: 48px;
  --mw-visible: 3;
  max-height: none;
  height: calc(var(--mw-item-h) * var(--mw-visible));
  padding-block: calc((var(--mw-visible) - 1) * var(--mw-item-h) / 2);
  /* 中线高亮：放在背景上（不需要额外 DOM，且不受滚动影响） */
  background-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(50% - (var(--mw-item-h) / 2)),
    rgba(255, 102, 153, 0.14) calc(50% - (var(--mw-item-h) / 2)),
    rgba(255, 102, 153, 0.14) calc(50% + (var(--mw-item-h) / 2)),
    transparent calc(50% + (var(--mw-item-h) / 2)),
    transparent 100%
  );
  background-origin: border-box;
  background-clip: padding-box;
}

.mention-suggestions.mention-wheel .mention-item {
  height: var(--mw-item-h);
  min-height: var(--mw-item-h);
  padding: 0 15px;
  display: flex;
  align-items: center;
  border-bottom: none;
  /* 默认“远离中心”稍微淡一些 */
  opacity: 0.55;
  transform: scale(0.96);
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.mention-suggestions.mention-wheel .mention-item.selected {
  opacity: 1;
  transform: scale(1.06);
}

/* 轻量的“远近”层次（不用 inline style，避免 CSP 风险） */
.mention-suggestions.mention-wheel .mention-item[data-wheel-dist="0"] { opacity: 1; transform: scale(1.06); }
.mention-suggestions.mention-wheel .mention-item[data-wheel-dist="1"],
.mention-suggestions.mention-wheel .mention-item[data-wheel-dist="-1"] { opacity: 0.78; transform: scale(1.01); }
.mention-suggestions.mention-wheel .mention-item[data-wheel-dist="2"],
.mention-suggestions.mention-wheel .mention-item[data-wheel-dist="-2"] { opacity: 0.58; transform: scale(0.98); }
.mention-suggestions.mention-wheel .mention-item[data-wheel-dist="3"],
.mention-suggestions.mention-wheel .mention-item[data-wheel-dist="-3"] { opacity: 0.40; transform: scale(0.95); }

/* 移动端：做成更像 iOS 闹钟滚轮的“窗口” */
@media (max-width: 768px) {
  .mention-suggestions {
    max-height: min(320px, 42vh);
    border-radius: 12px;
    /* 隐藏滚动条（不影响滚动） */
    scrollbar-width: none;
  }
  .mention-suggestions::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .mention-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  /* 上下渐隐，让它更像“滚轮窗口” */
  .mention-suggestions::before,
  .mention-suggestions::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 22px;
    pointer-events: none;
    z-index: 1;
  }
  .mention-suggestions::before {
    top: 0;
    background: linear-gradient(to bottom, var(--mention-glass-bg), rgba(0, 0, 0, 0));
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  .mention-suggestions::after {
    bottom: 0;
    background: linear-gradient(to top, var(--mention-glass-bg), rgba(0, 0, 0, 0));
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  /* 滚轮模式下禁用上下黑色渐隐遮罩：避免最上/最下用户出现“圆角黑影” */
  .mention-suggestions.mention-wheel::before,
  .mention-suggestions.mention-wheel::after {
    display: none;
  }
}