/* StreamVerse — custom styles (Tailwind handles layout) */

.view-panel {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.view-panel.hidden-panel {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  transform: translateY(8px);
}

.view-panel.active-panel {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  transform: translateY(0);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0f0f0f;
}

::-webkit-scrollbar-thumb {
  background: #3f3f3f;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

@media (max-width: 767px) {
  .sidebar-open {
    transform: translateX(0) !important;
  }
}

.card-hover {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
}

.offline-banner {
  animation: pulse-banner 2s ease-in-out infinite;
}

@keyframes pulse-banner {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}