@media (max-width: 768px) {
  #therapy-friend-chat {
    flex-direction: column !important;
    padding: 1em;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
}

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

button:hover {
  filter: brightness(90%);
}

/* Typing indicator styles */
#typing-indicator {
  font-style: italic;
  color: #999;
  margin-bottom: 0.5em;
  font-size: 0.95em;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

#typing-indicator .dot {
  animation: blink 1.5s infinite ease-in-out;
  font-weight: bold;
}

#typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}
#typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}
#typing-indicator .dot:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes blink {
  0% { opacity: 0.2; }
  20% { opacity: 1; }
  100% { opacity: 0.2; }
}

/* Chat bubble base style */
.chat-message {
  max-width: 75%;
  padding: 0.6em 1em;
  margin: 0.4em 0;
  border-radius: 12px;
  word-wrap: break-word;
  display: inline-block;
  clear: both;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* User message (right side, blue) */
.user-message {
  background: #4a90e2;
  color: white;
  float: right;
  border-bottom-right-radius: 4px;
}

/* Solace message (left side, light grey) */
.solace-message {
  background: #f1f1f1;
  color: #333;
  float: left;
  border-bottom-left-radius: 4px;
}
/* Chat Container */
#chat-log {
  background: #fdfdfd;
  padding: 1em;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  overflow-y: auto;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

/* Base Bubble Style */
.chat-message {
  max-width: 80%;
  padding: 0.6em 1em;
  margin: 0.2em 0;
  border-radius: 18px;
  word-wrap: break-word;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  display: inline-block;
  position: relative;
  animation: fadeIn 0.3s ease-in-out;
}

/* User Bubble (Right, Blue) */
.user-message {
  background: linear-gradient(135deg, #4a90e2, #357abd);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 6px;
}

/* Solace Bubble (Left, Soft Purple) */
.solace-message {
  background: #f1eefc;
  color: #333;
  align-self: flex-start;
  border-bottom-left-radius: 6px;
}

/* Nice Fade Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Solace bubbles: wider, softer, fade-in */
.solace-message {
  background: #f6f3ff; /* Softer purple */
  color: #333;
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  max-width: 90%;
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 0.8em 1.2em;
  opacity: 0;
  animation: solaceFadeIn 0.6s ease forwards;
}

/* Fade-in animation */
@keyframes solaceFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Solace message base */
.solace-message {
  background: #f6f3ff;
  color: #333;
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  max-width: 90%;
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 0.8em 1.2em;
  opacity: 0;
  animation: solaceFadeIn 0.6s ease forwards;
}

/* Solace paragraphs staggered animation */
.solace-message p {
  opacity: 0;
  transform: translateY(5px);
  animation: paragraphFadeIn 0.5s ease forwards;
}

/* Delay each paragraph slightly */
.solace-message p:nth-child(1) { animation-delay: 0.2s; }
.solace-message p:nth-child(2) { animation-delay: 0.6s; }
.solace-message p:nth-child(3) { animation-delay: 1s; }
.solace-message p:nth-child(4) { animation-delay: 1.4s; }

/* Fade animations */
@keyframes solaceFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes paragraphFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
#solace-avatar-container {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

#solace-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

#solace-avatar:hover {
  transform: scale(1.05);
}
/* Desktop default (already at 400px in HTML inline styles) */

/* Tablet size adjustment */
@media (max-width: 1024px) {
  #solace-avatar {
    width: 280px !important;
    height: 280px !important;
  }
}

/* Mobile size adjustment */
@media (max-width: 768px) {
  #solace-avatar {
    width: 80px !important;
    height: 80px !important;
  }

  /* Stack vertically on mobile */
  #solace-avatar-container {
    margin-bottom: 1em;
  }

  /* Switch layout to vertical for mobile */
  #therapy-friend-chat {
    flex-direction: column !important;
  }
}
/* Tablet & Mobile: Stack avatar above chat */
@media (max-width: 1024px) {
  /* Change wrapper layout */
  .solace-chat-wrapper {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Avatar smaller */
  #solace-avatar {
    width: 250px !important;
    height: 250px !important;
    margin-bottom: 1em;
  }
}

/* Mobile: Stack tighter & shrink avatar */
@media (max-width: 768px) {
  #solace-avatar {
    width: 180px !important;
    height: 180px !important;
  }
}
/* Fix chat box height and enable scrolling */
#chat-log {
  max-height: 200px;   /* Keeps height consistent */
  height: 200px;       /* Fixed height for stability */
  overflow-y: auto;    /* Adds scrollbar when content exceeds height */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}