/* perfect-scrollbar v0.6.7 */

.ps-container {
    -ms-touch-action: none;
    overflow: hidden !important
}

.ps-container.ps-active-x>.ps-scrollbar-x-rail,
.ps-container.ps-active-y>.ps-scrollbar-y-rail {
    display: block
}

.ps-container.ps-in-scrolling {
    pointer-events: none
}

.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
    background-color: #d9d4de; /* M3 Track color */
    opacity: 0.9;
  }
  .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
    background-color: #79747e; /* M3 Outline Variant */
  }
  .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
    background-color: #d9d4de; /* M3 Track color */
    opacity: 0.9;
  }
  .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
    background-color: #79747e; /* M3 Outline Variant */
    cursor: grabbing;
  }
  
  /* X Scrollbar Rail */
  .ps-container > .ps-scrollbar-x-rail {
    display: none;
    position: absolute;
    border-radius: 4px;
    opacity: 0;
    transition: background-color .2s linear, opacity .2s linear;
    bottom: 3px;
    height: 8px; /* Keep slim */
    background-color: #f3f0f4; /* Editor BG */
  }
  /* X Scrollbar Thumb */
  .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
    position: absolute;
    background-color: #aaa; /* Keep default */
    border-radius: 4px;
    transition: background-color .2s linear;
    bottom: 0;
    height: 8px;
  }
  
  /* Y Scrollbar Rail */
  .ps-container > .ps-scrollbar-y-rail {
    display: none;
    position: absolute;
    opacity: 1; /* Make it visible by default */
    background-color: #f3f0f4; /* Match editor background */
    border-radius: 10px; /* Rounded rail */
    transition: background-color .2s linear, opacity .2s linear;
    width: 12px; /* Slimmer */
    right: 4px; /* Closer to edge */
  }
  /* Y Scrollbar Thumb */
  .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
    position: absolute;
    background-color: #cac4d0; /* M3 Outline */
    width: 8px; /* Slimmer thumb */
    border-radius: 4px;
    transition: background-color .2s linear;
    right: 2px; /* Center thumb */
    cursor: grab;
  }
  .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
     background-color: #79747e; /* Darker on hover */
  }
  .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y:active {
     background-color: #6750a4; /* Primary when grabbing */
     cursor: grabbing;
  }
  
  
  /* Hover states for rails */
  .ps-container:hover > .ps-scrollbar-x-rail,
  .ps-container:hover > .ps-scrollbar-y-rail {
    opacity: 1; /* Fully visible on hover */
  }
  
  .ps-container:hover > .ps-scrollbar-x-rail:hover {
    background-color: #d9d4de; /* M3 Track hover */
    opacity: 0.9;
  }
  .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
    background-color: #79747e; /* M3 Outline Variant hover */
  }
  
  .ps-container:hover > .ps-scrollbar-y-rail:hover {
    background-color: #e7e0ec; /* M3 Surface Container High hover */
  }