@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

/* Tailwind overrides if strictly necessary */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Custom Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-section {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* slate-300 */
  border-radius: 10px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #334155; /* slate-700 */
}

/* WhatsApp Mockup Background Pattern */
#mockupMessage {
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    background-blend-mode: overlay;
    background-color: #e5ddd5;
}

.dark #mockupMessage {
    background-color: #0b141a;
    background-blend-mode: soft-light;
    opacity: 0.9;
}

/* Emoji Picker Grid Override */
.emoji-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.25rem;
}