/* 灵动岛风格主动推送胶囊 */
#di-pill {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-160%);
  z-index: 2147483647;
  max-width: 92vw;
  width: 420px;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  background: rgba(24, 22, 20, .92);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 .5rem 1.4rem rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .35s, width .3s, padding .3s;
  font-size: .9rem;
}
#di-pill.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#di-pill.shrunk {
  width: 52px;
  padding: .5rem;
  justify-content: center;
  cursor: pointer;
}
#di-pill.shrunk .di-title, #di-pill.shrunk .di-text, #di-pill.shrunk .di-close { display: none; }
.di-icon {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.di-body { flex: 1 1 auto; min-width: 0; }
.di-title { font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-text { font-size: .78rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-close {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; cursor: pointer;
}
.di-close:hover { background: rgba(255, 255, 255, .25); }

/* 多源轮播指示器小圆点 */
.di-dots {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 .1rem;
}
.di-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.di-dot:hover { background: rgba(255, 255, 255, .6); }
.di-dot.active { background: #fff; transform: scale(1.35); }

/* 轮播切换动效：收缩下沉再弹出 */
#di-pill.switching {
  transform: translateX(-50%) translateY(-120%) scale(.96);
  opacity: .55;
}

/* 收起态隐藏指示器与图标（仅留小圆点外观） */
#di-pill.shrunk .di-dots { display: none; }

@media (max-width: 480px) {
  #di-pill { width: 92vw; }
  .di-dots { display: none; } /* 小屏空间有限，隐藏圆点避免拥挤 */
}
