/* Nick Generator */

* { box-sizing: border-box; }

/* Prevent horizontal layout shift on mobile */
#nick-generator-root {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

.nick-generator-container {
  font-family: sans-serif;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px;
  background: #fff;
  color: #333;
  overflow-x: hidden;
}

/* ── Sticky wrapper (keeps space when pinned) ────────── */
.ng-sticky-wrap { width: 100%; }

/* ── Input section ───────────────────────────────────── */
.ng-input-section {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

/* JS sticky — desktop/tablet */
.ng-input-section.ng-pinned {
  position: fixed;
  top: 0;
  left: auto;
  z-index: 9999;
  border-radius: 0;
  border-left: none;
  border-right: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* JS sticky — mobile only: show just the textarea, very compact */
.ng-input-section.ng-pinned-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  z-index: 9999;
  border-radius: 0;
  border-left: none;
  border-right: none;
  padding: 6px 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.13);
}
.ng-input-section.ng-pinned-mobile .ng-textarea {
  height: 36px;
  font-size: 13px;
  padding: 7px 10px;
  margin-bottom: 0;
}
.ng-input-section.ng-pinned-mobile .ng-controls {
  display: none;
}

.ng-textarea {
  width: 100%;
  height: 48px;
  padding: 9px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  margin-bottom: 8px;
  background: #fff;
  color: #111;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
}
.ng-textarea:focus { border-color: #ec4899; }

/* ── Controls row: buttons + slider all in one line ──── */
.ng-controls {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.ng-btn {
  padding: 7px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.ng-btn:hover { opacity: 0.82; }
.ng-btn-primary   { background: #ec4899; color: #fff; }
.ng-btn-secondary { background: #f0f0f0; color: #444; border: 1px solid #ccc; }

/* Slider lives inside controls row, right side */
.ng-slider {
  flex: 1;
  min-width: 60px;
  max-width: 160px;
  margin-left: auto;
  cursor: pointer;
  accent-color: #ec4899;
}
.ng-slider-val {
  font-size: 11px;
  color: #ec4899;
  font-weight: 700;
  min-width: 30px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Category bar ────────────────────────────────────── */
.ng-categories {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ng-categories::-webkit-scrollbar { display: none; }

.ng-category-btn {
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s;
}
.ng-category-btn:hover:not(.active) { background: #fce7f3; border-color: #f9a8d4; color: #be185d; }
.ng-category-btn.active { background: #ec4899; color: #fff; border-color: #ec4899; }

/* ── Font cards ──────────────────────────────────────── */
.ng-results-grid { display: flex; flex-direction: column; gap: 8px; }

.ng-font-card {
  background: #fdf2f8;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #f9a8d4;
  transition: background 0.15s, transform 0.15s;
}
.ng-font-card:hover { background: #fce7f3; transform: translateY(-1px); }

/* Skeleton loading animation for lazy cards */
@keyframes ng-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.ng-skel {
  background: linear-gradient(90deg, #f3d4e8 25%, #fce4f3 50%, #f3d4e8 75%);
  background-size: 800px 100%;
  animation: ng-shimmer 1.4s infinite linear;
  border-radius: 6px;
  color: transparent !important;
  user-select: none;
  min-height: 32px;
}

.ng-font-content {
  color: #111;
  word-break: break-all;
  overflow-wrap: break-word;
  overflow: hidden;
  max-width: 100%;
  flex: 1;
  font-weight: 600;
  line-height: 1.6;
  min-height: 38px;
  transition: font-size 0.2s;
}

.ng-font-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: 10px;
  flex-shrink: 0;
}

.ng-action-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #be185d;
  padding: 3px;
  display: flex;
  align-items: center;
  transition: transform 0.15s;
}
.ng-action-icon:hover { transform: scale(1.15); }
.ng-fav-btn.active { color: #db2777; }

/* ── Category label ──────────────────────────────────── */
.ng-cat-header {
  font-size: 11px;
  font-weight: 700;
  color: #be185d;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 0 4px;
  border-bottom: 1px solid #f9a8d4;
  margin: 14px 0 6px;
}

/* ── Load more ───────────────────────────────────────── */
.ng-load-more-wrap { text-align: center; margin-top: 16px; padding-bottom: 8px; }
.ng-load-more {
  background: #ec4899;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(236,72,153,0.25);
}
.ng-load-more:hover  { background: #db2777; transform: translateY(-1px); }
.ng-load-more:active { transform: translateY(0); }

/* ── Toast ───────────────────────────────────────────── */
.ng-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 9px 18px;
  border-radius: 30px;
  z-index: 10000;
  font-size: 13px;
  font-weight: 600;
}

/* ── Bottom bar (mobile only) ────────────────────────── */
.ng-bottom-bar {
  display: none;
}

/* ── Mobile (≤600px) ─────────────────────────────────── */
@media (max-width: 600px) {
  .nick-generator-container { padding: 6px 8px 88px; }

  .ng-sticky-wrap { display: none; }

  .ng-category-btn  { padding: 4px 11px; font-size: 11px; }
  .ng-font-card     { padding: 8px 10px; }
  .ng-action-icon   { font-size: 17px; }

  /* Show bottom bar on mobile */
  .ng-bottom-bar {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ddd;
    z-index: 9999;
    padding: 5px 10px 4px;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.10);
  }

  .ng-bottom-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
  }

  .ng-bottom-textarea {
    flex: 1;
    height: 34px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 7px;
    font-size: 14px;
    background: #fff;
    color: #111;
    resize: none;
    outline: none;
    line-height: 1.3;
    width: 100%;
  }
  .ng-bottom-textarea:focus { border-color: #ec4899; }

  .ng-bottom-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 2px 0 2px;
  }
  .ng-bottom-actions .ng-btn {
    padding: 4px 10px;
    font-size: 11px;
    flex-shrink: 0;
  }
  .ng-bottom-actions .ng-slider {
    flex: 1;
    min-width: 40px;
    height: 3px;
  }
  .ng-bottom-actions .ng-slider-val {
    font-size: 10px;
    min-width: 26px;
    text-align: right;
  }

  .ng-bottom-stats {
    font-size: 10px;
    color: #999;
    padding: 0 1px;
    line-height: 1.2;
  }
}