/* VerChat Dynamic Banner PRO CSS */
#verchat-banner-pro {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  overflow: hidden;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Inter', sans-serif;
}

/* dynamic gradient via CSS variables (set from JS) */
#verchat-banner-pro::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(270deg, var(--grad-start, #0A0E1A), var(--grad-end, #C23EFF));
  background-size: 600% 600%;
  animation: verchatGradient 18s linear infinite;
  opacity: 0.95;
  filter: saturate(1.05) contrast(1.02);
}

@keyframes verchatGradient {
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.verchat-ticker-outer {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.verchat-ticker-track {
  display: inline-flex;
  gap: 60px;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  position: relative;
  left: 0;
}

.verchat-ticker-item {
  display: inline-block;
  padding: 8px 24px;
  font-weight: 700;
  color: var(--text-color, #ffffff);
  font-size: 16px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

#verchat-banner-pro-close {
  position: absolute;
  right: 12px;
  top: 8px;
  z-index: 3;
  background: rgba(0,0,0,0.25);
  color: #fff;
  border: none;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
@media (max-width:640px){
  .verchat-ticker-item{font-size:14px;padding:8px 14px}
  #verchat-banner-pro-close{right:8px;top:6px;padding:4px 6px}
}