/* ============================================================
   加仓锚点预警 — add-anchor-alert.css
   ============================================================ */

/* ── 预警横幅 ─────────────────────────────────────────────── */
#addAnchorBanner {
  position: relative;
  z-index: 50;
  animation: bannerSlideDown 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes bannerSlideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 横幅内的加仓按钮 */
#addAnchorBanner button {
  transition: opacity 0.15s, transform 0.15s;
}
#addAnchorBanner button:hover {
  opacity: 0.85;
  transform: scale(1.04);
}
#addAnchorBanner button:active {
  transform: scale(0.97);
}

/* ── 基金名称内联预警徽章 ─────────────────────────────────── */
.anchor-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
  line-height: 16px;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s;
  animation: badgePulse 2.4s ease-in-out infinite;
}

.anchor-badge:hover {
  opacity: 0.85;
  transform: scale(1.08);
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  50%       { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }
}

/* ── 加仓锚点管理弹窗 ─────────────────────────────────────── */
#addAnchorModal {
  animation: modalFadeIn 0.2s ease both;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 弹窗内容区滚动条美化 */
#addAnchorContent::-webkit-scrollbar {
  width: 5px;
}
#addAnchorContent::-webkit-scrollbar-track {
  background: transparent;
}
#addAnchorContent::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
#addAnchorContent::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* 基金卡片悬浮效果 */
#addAnchorContent > div > div {
  transition: border-color 0.2s, background 0.2s;
}
#addAnchorContent > div > div:hover {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* 输入框聚焦样式 */
#addAnchorContent input[type="number"]:focus {
  border-color: rgba(34, 211, 238, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.08);
  outline: none;
}

/* ── 触发级别颜色语义 ─────────────────────────────────────── */
/* Level 1 — 跌8%  (amber) */
.anchor-level-1 { background: #f59e0b; }
/* Level 2 — 跌16% (red)   */
.anchor-level-2 { background: #ef4444; }
/* Level 3 — 跌24% (deep-red + pulse) */
.anchor-level-3 {
  background: #dc2626;
  animation: badgePulseRed 1.6s ease-in-out infinite;
}
@keyframes badgePulseRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  50%       { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.25); }
}

/* ── 移动端适配 ───────────────────────────────────────────── */
@media (max-width: 640px) {
  #addAnchorBanner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
  }

  #addAnchorContent {
    padding: 14px 16px !important;
  }

  /* 设置行改为两列堆叠 */
  #addAnchorContent .anchor-inputs-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 无障碍：减少动画 ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .anchor-badge,
  .anchor-level-3,
  #addAnchorBanner,
  #addAnchorModal {
    animation: none !important;
  }
}