/* assets/css/style.css */

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

/* Hide scrollbar for category scroll */
.scrollbar-hide {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

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

/* Scrollbars */
#promptText::-webkit-scrollbar,
#howToText::-webkit-scrollbar {
  width: 6px;
}
#promptText::-webkit-scrollbar-track,
#howToText::-webkit-scrollbar-track {
  background: transparent;
}
#promptText::-webkit-scrollbar-thumb,
#howToText::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}
#promptText::-webkit-scrollbar-thumb:hover,
#howToText::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Textarea styling */
#promptText {
  color: #f1f5f9 !important;
  background-color: rgba(2, 6, 23, 0.5) !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

#promptText::placeholder {
  color: #64748b;
}

/* How-to text styling */
#howToText {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* Button transitions */
.btn-copy,
#shareButton {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Prevent horizontal overflow */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure containers don't overflow */
main,
section,
article,
div {
  max-width: 100%;
  overflow-x: hidden;
}

/* Prevent any element from exceeding viewport */
header,
footer,
nav {
  max-width: 100%;
  overflow-x: hidden;
}

/* Responsive text wrapping */
h1, h2, h3, h4, h5, h6, p, span, a {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Ensure inputs and selects don't overflow */
input,
select,
textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* Category scroll container */
.category-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
}

/* Prevent any fixed widths that could cause overflow */
.container,
.wrapper {
  max-width: 100%;
  width: 100%;
}

/* Ensure flex items don't overflow */
.flex,
.grid {
  min-width: 0;
}

/* Prevent text from causing overflow */
h1, h2, h3, h4, h5, h6, p, span, a, li {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}