/* ============================
   ESTILO DO CARD 
   (Adicionado porque não estava no base.css)
============================ */

/* ============================
   GRADE DE EMOJIS
============================ */
.emoji-grid {
  display: grid;
  /* Cria as colunas que cabem no espaço de 838px */
  grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
  gap: var(--space-sm);
  
  max-height: 500px;
  overflow-y: auto;
  padding: 15px;
  background: var(--bg); /* Fundo levemente cinza para destacar os itens */
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 10px;
}

/* Itens individuais */
.emoji-item {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  user-select: none; /* Evita selecionar o texto ao clicar rápido */
}

/* Efeito ao passar o mouse */
.emoji-item:hover {
  border-color: var(--primary);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: var(--card);
  z-index: 2;
}

/* Efeito ao clicar */
.emoji-item:active {
  transform: scale(0.9);
}

/* Scrollbar personalizada */
.emoji-grid::-webkit-scrollbar {
  width: 8px;
}
.emoji-grid::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

.emoji-item {
    font-family: 'Noto Color Emoji', var(--font-base);
    /* Isso força o navegador a baixar e usar as bandeiras do Google */
}

/* Dark mode – emoji tool */
html.dark .emoji-item {
  background: color-mix(in srgb, var(--card) 90%, black);
  border-color: var(--border);
}

html.dark .emoji-item:hover {
  box-shadow: 0 0 0 1px var(--primary),
              0 8px 20px rgba(0, 0, 0, 0.6);
}