/* iOS-like scrollbar styles */

/* For Webkit browsers (Chrome, Safari, newer Edge) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }
  
  /* For Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }
  
  /* Auto-hide behavior */
  .overflow-auto {
    -webkit-overflow-scrolling: touch; /* Better scrolling on iOS */
    transition: scrollbar-color 0.2s ease;
  }
  
  .overflow-auto:not(:hover):not(:focus):not(:active) {
    scrollbar-color: transparent transparent; /* Hide scrollbar when not interacting */
  }
  
  /* Only show scrollbar on hover for Chrome/Safari */
  .overflow-auto:not(:hover):not(:focus):not(:active)::-webkit-scrollbar-thumb {
    background: transparent;
  }