/* Custom styles beyond Tailwind */

/* Animation for recording button */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

.recording {
  animation: pulse 1.5s infinite;
  background-color: rgb(220, 38, 38) !important; /* red-600 */
}

/* Conversation message styling */
.message {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  max-width: 85%;
}

.message-ai {
  background-color: #f3f4f6;
  align-self: center;
  width: 100%;
  border: 1px solid #e5e7eb;
}

.message-person1 {
  background-color: #dbeafe;
  align-self: flex-start;
  border: 1px solid #bfdbfe;
}

.message-person2 {
  background-color: #dcfce7;
  align-self: flex-end;
  border: 1px solid #bbf7d0;
}

/* Make conversation container a flex container for message alignment */
#conversation-container {
  display: flex;
  flex-direction: column;
}

/* Ensure the app takes full height on mobile */
@media (max-width: 640px) {
  #app {
    min-height: 100vh;
  }
}