/* =============================================================================
 * Novara Avatar Picker — self-contained styles (namespaced under .nap)
 * Matches Novara CI: deep-navy -> purple background, cyan #22d3ee / violet
 * #a78bfa accents, translucent "glass" cards, system font stack.
 * No external dependencies; safe to drop into the app or use standalone.
 * ========================================================================== */
.nap {
  /* aliases of the shared Novara tokens (css/style.css) — one palette app-wide */
  --nap-navy: var(--nv-bg, #0a0e1c);
  --nap-purple: var(--nv-bg-3, #1a1035);
  --nap-cyan: var(--nv-cyan, #22d3ee);
  --nap-violet: var(--nv-violet, #a78bfa);
  --nap-fuchsia: var(--nv-violet, #a78bfa);
  --nap-ink: var(--nv-ink, #eef2ff);
  --nap-muted: var(--nv-muted, #94a3b8);
  --nap-glass: var(--nv-glass, rgba(255, 255, 255, 0.06));
  --nap-glass-brd: var(--nv-line, rgba(255, 255, 255, 0.09));

  color: var(--nap-ink);
  font-family: var(--nv-font-body, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif);
  display: block;
  width: 100%;
}

.nap * { box-sizing: border-box; }

.nap .glass,
.nap-tile,
.nap-preview {
  background: var(--nap-glass);
  border: 1px solid var(--nap-glass-brd);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* --- Preview panel ------------------------------------------------------- */
.nap-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1.5rem;
  margin-bottom: 1rem;
}
.nap-preview-img {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 1rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 50% 20%, rgba(34, 211, 238, 0.18), rgba(167, 139, 250, 0.14) 55%, transparent 70%);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.nap-preview-pic,
.nap-preview-img img,
.nap-preview-img picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.nap-preview-meta { min-width: 0; }
.nap-preview-name {
  font-weight: 700;
  font-size: 1.1rem;
  background: linear-gradient(90deg, var(--nap-cyan), var(--nap-fuchsia));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nap-preview-desc {
  color: var(--nap-muted);
  font-size: 0.85rem;
  margin-top: 0.15rem;
  line-height: 1.35;
}

/* --- Grid --------------------------------------------------------------- */
.nap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.6rem;
}
@media (min-width: 640px) {
  .nap-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.75rem; }
}

.nap-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  outline: none;
}
.nap-tile:hover { transform: translateY(-2px) scale(1.02); }
.nap-tile-img,
.nap-tile picture,
.nap-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* keyboard focus: the app-wide :focus-visible ring (css/style.css) */

/* selected state — mirrors the app's `ring-1 ring-cyan-400` treatment */
.nap-tile.is-selected {
  border-color: var(--nap-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.85), 0 0 22px rgba(167, 139, 250, 0.45);
}
.nap-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #06202a;
  background: var(--nap-cyan);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.nap-tile.is-selected .nap-check { opacity: 1; transform: scale(1); }

/* --- Save bar ----------------------------------------------------------- */
.nap-savebar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.nap-save {
  /* = .nv-btn-primary: cyan, dark text, cyan glow, 16px radius, ≥44px */
  border: 1px solid transparent;
  border-radius: var(--nv-r-tile, 16px);
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #04121a;
  cursor: pointer;
  background: linear-gradient(120deg, var(--nap-cyan), var(--nv-cyan-soft, #67e8f9));
  box-shadow: 0 12px 30px -10px rgba(34, 211, 238, 0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nap-save:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -10px rgba(34, 211, 238, 0.6); }
.nap-status { color: var(--nap-cyan); font-weight: 600; font-size: 0.9rem; }

.nap-empty { color: var(--nap-muted); padding: 0.75rem 0; font-size: 0.9rem; }
.nap-empty.nap-error { color: #fca5a5; }

@media (prefers-reduced-motion: reduce) {
  .nap-tile, .nap-save, .nap-check { transition: none; }
  .nap-tile:hover { transform: none; }
}

/* Delete — only shown when one of the user's OWN avatars is selected. Muted by
   default so it never competes with Save, and clearly destructive on hover. */
.nap-remove {
  margin-left: .5rem;
  min-height: 44px; padding: 0 1rem;
  border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(248, 113, 113, .35);
  background: transparent; color: #fca5a5;
  font-weight: 600; font-size: .95rem;
}
.nap-remove:hover { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .6); }
.nap-remove:active { transform: scale(.97); }