/* Small Lovely Top Notice - 前端样式（小而美精简版） */
/* 追求纤细、不占空间，但依然保持清晰与可点击性 */

:root{
  /* 插件动态注入的变量：
     --slt-bg
     --slt-color
     --slt-font-desktop
     --slt-font-mobile
  */
}

#slt-notice{
  background: var(--slt-bg, #f7f7f9);
  color: var(--slt-color, #222);
  font-size: var(--slt-font-desktop, 15px);
  line-height: 1.4;
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 0 0 1px rgba(0,0,0,.02) inset;
}

#slt-notice .slt-inner{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;       /* 较小的内边距，细长条效果 */
  text-decoration: none;
  color: inherit;
  min-height: 32px;        /* 保持条形不至于过扁 */
}

#slt-notice .slt-message{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#slt-notice .slt-flex-spacer{
  flex: 1 1 auto;
  min-width: 8px;
}

#slt-notice .slt-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;           /* 缩小箭头的占位感 */
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
  animation: slt-float 1.25s ease-in-out infinite;
  opacity: .9;
}

#slt-notice .slt-inner:hover .slt-arrow{
  transform: translateX(2px) scale(1.03);
  background: rgba(255,255,255,.35);
  opacity: 1;
}

@keyframes slt-float{
  0%   { transform: translateX(0);   }
  50%  { transform: translateX(4px); }
  100% { transform: translateX(0);   }
}

/* 移动端优化 */
@media (max-width: 768px){
  #slt-notice{
    font-size: var(--slt-font-mobile, 14px);
  }
  #slt-notice .slt-inner{
    padding: 5px 12px;   /* 更紧凑 */
    gap: 6px;
    min-height: 28px;    /* 移动端高度稍小 */
  }
  #slt-notice .slt-arrow{
    padding: 3px;
  }
}