/* 灵动岛风格主动推送胶囊 */
#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); }
@media (max-width: 480px) {
  #di-pill { width: 92vw; }
}