/* 控制台角标弹窗广告
   由 assets/ads-widget.js 动态创建 .vc-ad 卡片，右下角 / 左下角两种位置。
   样式令牌沿用设计系统，取不到时用兜底值，避免令牌缺失导致布局塌掉。 */

.vc-ad {
  position: fixed;
  bottom: calc(var(--festival-h, 0px) + 22px);
  z-index: 60;
  display: none;
  width: 268px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface, #fff);
  /* 双层阴影：近距离的环境阴影 + 远距离的投影，比单层更立体 */
  box-shadow:
    0 2px 6px rgba(16, 24, 40, .06),
    0 18px 44px -12px rgba(16, 24, 40, .28);
  opacity: 0;
  transform: translateY(26px) scale(.94);
  transition:
    opacity .42s cubic-bezier(.16, 1, .3, 1),
    transform .42s cubic-bezier(.16, 1, .3, 1),
    box-shadow .3s ease;
  will-change: opacity, transform;
}

.vc-ad.is-right { right: 22px; }
/* 左下角要避开固定侧边栏（--shell-nav 由控制台外壳定义） */
.vc-ad.is-left { left: calc(var(--shell-nav, 0px) + 22px); }

.vc-ad.show { display: block; }
.vc-ad.visible { opacity: 1; transform: none; }

/* 悬停：阴影加深（图片另有轻微放大，见 .vc-ad-image） */
.vc-ad:hover {
  box-shadow:
    0 4px 10px rgba(16, 24, 40, .08),
    0 28px 60px -14px rgba(16, 24, 40, .34);
}

/* 关闭：向下收缩淡出，比直接消失更自然 */
.vc-ad.closing {
  opacity: 0;
  transform: translateY(12px) scale(.96);
  transition-duration: .22s;
  transition-timing-function: ease;
  pointer-events: none;
}

.vc-ad-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.vc-ad-media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface-subtle, #f1f3f7);
}

/* 高度按图片自身比例自适应：横版 logo 不会被裁掉，超高图才用 max-height 截断 */
.vc-ad-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 190px;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

.vc-ad:hover .vc-ad-image { transform: scale(1.06); }

/* 广告标识：贴在图左上角，毛玻璃底 */
.vc-ad-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(20, 22, 28, .38);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.6;
  pointer-events: none;
}

.vc-ad-body {
  display: block;
  padding: 11px 13px 13px;
}

.vc-ad-title {
  display: block;
  color: var(--text-primary, #111);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.45;
}

.vc-ad-desc {
  display: block;
  margin-top: 3px;
  color: var(--text-secondary, #667085);
  font-size: 12px;
  line-height: 1.5;
}

/* 关闭按钮：毛玻璃圆钮，常驻可见（移动端无悬停） */
.vc-ad-close {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: rgba(20, 22, 28, .36);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  font: 600 12px/1 inherit;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.vc-ad-close:hover {
  background: rgba(20, 22, 28, .62);
  transform: scale(1.1);
}

.vc-ad-close:active { transform: scale(.94); }

@media (max-width: 760px) {
  .vc-ad {
    width: 236px;
    /* 移动端外壳底部有导航条（--shell-mobile），弹窗要抬到它上方 */
    bottom: calc(var(--festival-h, 0px) + var(--shell-mobile, 0px) + 14px);
  }
  .vc-ad.is-right { right: 14px; }
  .vc-ad.is-left { left: 14px; }
  .vc-ad-image { max-height: 150px; }
  /* 触屏没有悬停，关闭按钮加大到易点区域 */
  .vc-ad-close { width: 30px; height: 30px; font-size: 13px; }
}

/* 有面板（如配置编辑抽屉）打开时，JS 会给 <html> 加这个类把广告淡出，避免遮挡 */
html.vc-ad-hidden .vc-ad {
  opacity: 0;
  pointer-events: none;
}

/* 尊重系统的“减少动态效果”设置 */
@media (prefers-reduced-motion: reduce) {
  .vc-ad,
  .vc-ad-image,
  .vc-ad-close {
    transition: none !important;
  }
  .vc-ad:hover .vc-ad-image { transform: none; }
}