/* ============================================
   TECH ORBIT - CHATBOT WIDGET (Extended Styles)
   Core styles are in style.css
   ============================================ */

/* Additional chatbot-specific animations */
.chatbot-window .message {
  animation: messageSlideIn 0.3s ease;
}

@keyframes messageSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  width: fit-content;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #999;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite;
}

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

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* Quick reply buttons */
.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.quick-reply-btn {
  padding: 8px 16px;
  background: var(--white);
  border: 2px solid var(--ocean-blue);
  color: var(--ocean-blue);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.quick-reply-btn:hover {
  background: var(--ocean-blue);
  color: var(--white);
}

/* Category buttons */
.category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.category-btn {
  padding: 10px 16px;
  background: var(--sky-light);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ocean-blue);
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  gap: 6px;
}

.category-btn:hover {
  background: var(--ocean-blue);
  color: var(--white);
}

/* CTA in chat */
.chat-cta {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 18px;
  background: var(--sun-orange);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-normal);
}

.chat-cta:hover {
  background: var(--ocean-blue);
}

/* Chat feedback */
.chat-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.75rem;
  color: #888;
}

.chat-feedback button {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-normal);
}

.chat-feedback button:hover {
  opacity: 1;
}