@import "tailwindcss";
@plugin "@tailwindcss/typography";

:root {
  color-scheme: dark;
}

html {
  min-height: 100%;
  overflow-y: scroll;
}

body,
#root {
  min-height: 100%;
}

body {
  margin: 0;
  background: #060816;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

@layer utilities {
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

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

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

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

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
  }
}

@layer components {
  .audio-preview-range {
    height: 20px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
  }

  .audio-preview-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
  }

  .audio-preview-range::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    background: #67e8f9;
    box-shadow: 0 0 0 5px rgba(103, 232, 249, 0.16), 0 8px 18px rgba(0, 0, 0, 0.32);
  }

  .audio-preview-range::-moz-range-track {
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
  }

  .audio-preview-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #67e8f9;
    box-shadow: 0 0 0 5px rgba(103, 232, 249, 0.16), 0 8px 18px rgba(0, 0, 0, 0.32);
  }
}

@layer components {
  .message-audio-range {
    height: 20px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
  }

  .message-audio-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: transparent;
  }

  .message-audio-range::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    background: #67e8f9;
    box-shadow: 0 0 0 5px rgba(103, 232, 249, 0.16), 0 8px 18px rgba(0, 0, 0, 0.32);
  }

  .message-audio-range::-moz-range-track {
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
  }

  .message-audio-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #67e8f9;
    box-shadow: 0 0 0 5px rgba(103, 232, 249, 0.16), 0 8px 18px rgba(0, 0, 0, 0.32);
  }
}