/* AI Assistant styling sheet */

#key-assistant-container {
  /* Inherits fixed layout from index.html */
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Scrollbar styling for chat popup */
#key-chat-messages::-webkit-scrollbar {
  width: 5px;
}

#key-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

#key-chat-messages::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

#key-chat-messages::-webkit-scrollbar-thumb:hover {
  background: var(--text-light);
}

/* Online Dot blinking animation */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

#key-chat-popup span svg, 
#key-chat-popup span span {
  animation: blink 2s infinite;
}

/* Specific Chat Message styles */
.key-message {
  animation: messageSlideIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
  opacity: 0;
  transform: translateY(10px);
}

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

/* Avatar Pulsing Glow */
#key-avatar-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(114, 55, 239, 0.6);
}

#key-avatar-btn:active {
  transform: scale(0.95);
}

/* ================= ASSISTANT RESPONSIVE BREAKPOINTS ================= */

@media (max-width: 425px) {
  #key-chat-popup {
    width: calc(100vw - 28px) !important;
    max-width: 320px !important;
  }
}

@media (max-width: 375px) {
  #key-chat-popup {
    width: calc(100vw - 20px) !important;
    max-width: 308px !important;
  }
}

@media (max-width: 320px) {
  #key-chat-popup {
    width: calc(100vw - 12px) !important;
    max-width: 300px !important;
  }

  #key-chat-messages {
    max-height: 200px !important;
    padding: 0.5rem !important;
  }
}