/* --- Grain Overlay --- */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.05;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXVדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדהדה-');
}

/* --- Social Links --- */
.social-link {
    @apply w-10 h-10 flex items-center justify-center text-lg text-gray-400 bg-white/5 rounded-full transition-all duration-300;
}
.social-link:hover {
    @apply bg-brand-primary/80 text-white scale-110;
}

/* --- Custom Scrollbar --- */
#history::-webkit-scrollbar {
  width: 6px;
}
#history::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
#history::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.4); /* brand-primary with opacity */
  border-radius: 10px;
}
#history::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.7);
}


/* --- Custom Range Input (Volume Slider) --- */
input[type=range] {
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
}

input[type=range]:focus {
  outline: none;
}

/* Webkit */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background-color: #EC4899; /* brand-accent */
  margin-top: -6px;
  transition: all .2s ease-in-out;
  box-shadow: 0 0 10px 0 rgba(236, 72, 153, 0.7);
}

input[type=range]:hover::-webkit-slider-thumb {
    transform: scale(1.1);
    box-shadow: 0 0 15px 2px rgba(236, 72, 153, 0.8);
}

/* Mozilla */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

input[type=range]::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background-color: #EC4899;
  border: none;
  transition: all .2s ease-in-out;
  box-shadow: 0 0 10px 0 rgba(236, 72, 153, 0.7);
}

input[type=range]:hover::-moz-range-thumb {
    transform: scale(1.1);
    box-shadow: 0 0 15px 2px rgba(236, 72, 153, 0.8);
}