/* --- Mobile-safe sizing & overflow prevention --- */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; }
:root { --safe-pad: env(safe-area-inset-right); }

:root {
  --color-primary: #2150ff;
  --color-primary-soft: #3c6cee;
  --color-secondary: #fbb43c;
  --color-secondary-soft: #fcd99b;
}

/* ---- Layout helpers ---- */
html, body {
  overflow-x: hidden;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
footer {
  flex-shrink: 0;
}

/* ---- Category pills row (mobile-friendly) ---- */
#category-pills {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: var(--safe-pad);
}
#category-pills-track {
  display: inline-flex;
  gap: 0.5rem;
  white-space: nowrap;
}
#category-pills-track > * {
  flex-shrink: 0; /* prevent wrapping / layout jump */
}

/* Optional thin scrollbar for WebKit */
#category-pills::-webkit-scrollbar {
  height: 6px;
}
#category-pills::-webkit-scrollbar-thumb {
  background: rgba(107,114,128,0.35); /* gray-500 @ ~35% */
  border-radius: 9999px;
}
#category-pills::-webkit-scrollbar-track {
  background: transparent;
}

/* Mobile polish */
@media (max-width: 640px) {
  .search-input { font-size: 16px; } /* prevent iOS zoom */
  #emoji-grid { grid-auto-rows: 1fr; }
  footer { padding-bottom: env(safe-area-inset-bottom); }
}
/* Ensure no component causes horizontal scroll */
.no-x-scroll { overflow-x: hidden; }

.page-container { max-width: 100%; overflow-x: hidden; }
@media (max-width: 640px) {
  #category-pills-track { max-width: 100%; }
}

/* --- Prevent horizontal overflow on key wrappers --- */
.page-container, #category-pills, #emoji-grid { max-width: 100%; overflow-x: hidden; }
@media (max-width: 640px) {
  .page-container { padding-left: 0.5rem; padding-right: 0.5rem; }
}
.page-container { max-width: 72rem; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .page-container { max-width: 100%; }
}

/* Strong overflow guards to stop any horizontal scroll */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
.page-container, #category-pills, #emoji-grid { max-width: 100%; width: 100%; overflow-x: hidden; }
/* prevent flex/grid containers from letting children force width */
.page-container, .grid, .flex { min-width: 0; }

/* Constrain absolute mobile popover menu within viewport */
#nav-menu { max-width: calc(100vw - 1.5rem); right: 0.75rem; left: auto; }

/* Emoji card text must not push width */
.emoji-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

/* --- Brand color utilities --- */
.bg-primary { background-color: var(--color-primary); }
.bg-primary-soft { background-color: var(--color-primary-soft); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary-soft { background-color: var(--color-secondary-soft); }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }

.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }

.hover-bg-primary:hover { background-color: var(--color-primary-soft); }
.hover-bg-secondary:hover { background-color: var(--color-secondary-soft); }