@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .animate-marquee {
    animation: marquee 30s linear infinite;
  }

  .pb-trading-history {
    padding-bottom: 40px;
  }

  .trading-history-visible {
    margin-bottom: 40px;
  }

  /* Add a class to create space for the trading buttons */
  .trading-buttons-container {
    margin-bottom: 60px;
  }
}

/* Hide scrollbars but keep functionality */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Add scrollbar-none class if it doesn't exist */
.scrollbar-none {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.scrollbar-none::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Vertical text styles */
.writing-vertical-rl {
  writing-mode: vertical-rl;
}

.vertical-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;
  white-space: nowrap;
  letter-spacing: 0.05em;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Improved vertical text for collapsed panels */
.collapsed-panel-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.05em;
  padding: 1rem 0;
  font-weight: 500;
}

/* Add these styles to the utilities.css file */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.5);
  border-radius: 3px;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 100, 100, 0.5) transparent;
}

/* Add flash animations for trades */
@keyframes flash-green {
  0% {
    background-color: rgba(16, 185, 129, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

@keyframes flash-red {
  0% {
    background-color: rgba(239, 68, 68, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

.animate-flash-green {
  animation: flash-green 1s ease-out;
}

.animate-flash-red {
  animation: flash-red 1s ease-out;
}