/* assets/css/ella-chat.css */

/* Custom "Ask Ella" Gradient Button (Cyan -> Purple -> Magenta) */
.ella-launcher-btn {
  background: linear-gradient(135deg, #00d2ff 0%, #9333ea 50%, #ec4899 100%);
  box-shadow: 0 10px 25px -5px rgba(236, 72, 153, 0.45), 0 8px 10px -6px rgba(0, 210, 255, 0.35);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.ella-launcher-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 30px -5px rgba(236, 72, 153, 0.6), 0 10px 18px -5px rgba(0, 210, 255, 0.45);
}

.ella-launcher-btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* Hyper-Futuristic Avatar Pulsing Glow Effect */
.ella-avatar-pulse {
  position: relative;
}

.ella-avatar-pulse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #00d2ff, #ec4899);
  opacity: 0.6;
  filter: blur(4px);
  z-index: -1;
  animation: ellaPulse 3s infinite alternate;
}

@keyframes ellaPulse {
  0% { transform: scale(0.95); opacity: 0.4; }
  100% { transform: scale(1.15); opacity: 0.8; }
}

/* Chat Drawer / Modal Styling */
.ella-chat-modal {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ella-chat-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ella-chat-modal:not(.hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Smooth message animations */
.ella-message-fade {
  animation: ellaFadeIn 0.25s ease-out forwards;
}

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

/* Task C — Ask Ella mobile-only visual refinement.
   Scoped strictly to widths below Tailwind's `sm` breakpoint (640px),
   so this cannot affect the approved desktop presentation, which is
   controlled entirely by the sm: classes already on the button (see
   assets/js/ella-chat.js). Handles only what utility classes can't:
   safe-area clearance above the home-indicator/gesture-bar on notched
   phones, so the launcher never sits under it. */
@media (max-width: 639px) {
  #ella-launcher-btn {
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }
}

/* Hide horizontal scrollbar for prompt pills */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}