/* Temple Chat Widget Enhanced Styles */
.typing-indicator {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d7377 0%, #14a085 100%);
  animation: temple-typing-bounce 1.6s infinite ease-in-out;
  box-shadow: 0 2px 4px rgba(13, 115, 119, 0.2);
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes temple-typing-bounce {
  0%, 60%, 100% { 
    transform: translateY(0) scale(1); 
    opacity: 0.6; 
  }
  30% { 
    transform: translateY(-8px) scale(1.1); 
    opacity: 1; 
  }
}

/* Enhanced input placeholder styling */
.temple-chat-panel input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Custom focus ring */
.temple-chat-panel input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(13, 115, 119, 0.2);
}

/* Smooth scrolling for chat log */
.temple-chat-panel #chatlog {
  scroll-behavior: smooth;
}

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
  .temple-chat-bubble {
    right: 16px !important;
    bottom: 16px !important;
    width: 56px !important;
    height: 56px !important;
  }
  
  .temple-chat-bubble img {
    width: 32px !important;
    height: 32px !important;
  }
  
  /* Smaller avatars in mobile chat messages */
  .temple-chat-panel #chatlog div[style*="width:24px"] {
    width: 20px !important;
    height: 20px !important;
  }
  
  .temple-chat-panel #chatlog div[style*="width:24px"] img {
    width: 12px !important;
    height: 12px !important;
  }
  
  .temple-chat-panel {
    right: 16px !important;
    bottom: 84px !important;
    width: calc(100vw - 32px) !important;
    height: calc(100vh - 140px) !important;
    max-height: 600px;
  }
}

/* Dark theme message styling enhancements */
.temple-chat-panel .temple-msg-container {
  animation: temple-msg-fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Enhanced loading state */
.temple-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Speech bubble styles */
.temple-speech-bubble {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.temple-speech-bubble:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.15) !important;
}

.temple-speech-bubble:active {
  transform: translateY(0) scale(1) !important;
}

@keyframes temple-speech-bounce {
  0% { 
    opacity: 0; 
    transform: translateY(10px) scale(0.9); 
  }
  60% { 
    opacity: 1; 
    transform: translateY(-4px) scale(1.02); 
  }
  80% { 
    transform: translateY(2px) scale(0.99); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

/* Enhanced mobile speech bubble */
@media (max-width: 768px) {
  .temple-speech-bubble {
    right: 84px !important;
    bottom: 36px !important;
    max-width: 200px !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
  
  .temple-speech-bubble div[style*="border-left"] {
    right: -6px !important;
    border-left-width: 6px !important;
    border-top-width: 6px !important;
    border-bottom-width: 6px !important;
  }
}

/* Accessibility improvements */
.temple-chat-bubble:focus {
  outline: 2px solid #dc267f;
  outline-offset: 2px;
}

.temple-chat-panel button:focus {
  outline: 2px solid #0d7377;
  outline-offset: 2px;
}

.temple-speech-bubble:focus {
  outline: 2px solid #0d7377;
  outline-offset: 2px;
}