/* Estilos para o chat */
.message-item {
  scroll-margin-bottom: 1rem;
  animation: messageSlideIn 0.3s ease-out;
}

/* Scroll suave para o container de mensagens */
[data-controller="chat-unified"],
[data-controller*="chat-pagination"] {
  scroll-behavior: smooth;
}

/* Animação para novas mensagens */
@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Separador de data */
.date-separator {
  animation: fadeIn 0.3s ease-out;
}

.date-separator .date-badge {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Indicador de digitação (para futuro uso) */
.typing-indicator {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: #f3f4f6;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.typing-indicator::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #6b7280;
  animation: typing 1.4s infinite;
  margin-left: 0.5rem;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  30% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Estilo do textarea com auto-resize */
[data-controller="auto-resize"] {
  min-height: 3rem;
  max-height: 7.5rem;
  transition: height 0.1s ease;
}

/* Hover state para mensagens */
.message-item:hover .message-time {
  opacity: 1;
}

.message-time {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

/* ===================== MOBILE STYLES ===================== */

/* Touch responsivo para links em mobile */
@media (max-width: 1024px) {
  .mobile-chat-link {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
  }

  .mobile-chat-link:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Container de mensagens mais compacto no mobile */
  .mobile-messages-container {
    padding: 0.75rem;
  }

  .mobile-messages-container .message-item {
    margin-bottom: 0.75rem;
  }

  /* Form mais compacto no mobile */
  .mobile-message-form {
    padding: 0.75rem;
  }

  .mobile-message-form textarea {
    font-size: 16px; /* Previne zoom no iOS */
    padding: 0.75rem 1rem;
  }

  /* Back button hover effect */
  .mobile-back-button:active {
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
  }
}

/* Animação específica para transições mobile */
@media (max-width: 1024px) {
  turbo-frame[id="mobile_content"] {
    animation: mobileSlideIn 0.3s ease-out;
  }
}

@keyframes mobileSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}