/* Estilos responsivos */

/* Pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  .chat-header h1 {
    font-size: 1.25rem;
  }
  
  .message {
    max-width: 90%;
  }
  
  .input-wrapper {
    flex-direction: column;
  }
  
  .send-btn {
    padding: 0.75rem;
    margin-top: 0.5rem;
  }
  
  .modal-content {
    width: 95%;
  }
  
  .message-content {
    padding: 0.75rem;
  }
  
  .welcome-message {
    max-width: 90%;
  }
}

/* Pantallas medianas (tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
  .chat-container {
    max-width: 768px;
  }
  
  .message {
    max-width: 85%;
  }
}

/* Pantallas grandes (desktop) */
@media (min-width: 1025px) {
  .chat-container {
    max-width: 1000px;
  }
  
  .message {
    max-width: 75%;
  }
}

/* Pantallas muy grandes */
@media (min-width: 1201px) {
  .chat-container {
    max-width: 1200px;
  }
  
  .message {
    max-width: 70%;
  }
}

/* Ajustes específicos para móviles */
@media (max-width: 480px) {
  .chat-header {
    padding: 0.75rem;
  }
  
  .messages-container {
    padding: 0.75rem;
  }
  
  .input-container {
    padding: 0.75rem;
  }
  
  .message-content {
    padding: 0.6rem;
    font-size: 0.9rem;
  }
  
  .message-timestamp {
    font-size: 0.65rem;
  }
  
  #messageInput {
    padding: 0.6rem;
    font-size: 0.9rem;
  }
  
  .send-btn {
    padding: 0.6rem;
    font-size: 0.9rem;
  }
  
  .modal-header {
    padding: 0.75rem;
  }
  
  .modal-header h2 {
    font-size: 1.1rem;
  }
  
  .modal-body {
    padding: 0.75rem;
  }
  
  .setting-item {
    margin-bottom: 0.75rem;
  }
  
  .setting-item label {
    font-size: 0.9rem;
  }
  
  .setting-item input,
  .setting-item select {
    padding: 0.6rem;
    font-size: 0.9rem;
  }
}