/* ============================================================================
   Chattambees – custom styles
   Tailwind (via CDN) handles most utilities. This file holds the keyframe
   animations, scrollbar styling, and a few mobile refinements.
   ========================================================================== */

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(3deg); }
}
@keyframes buzz {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20%      { transform: translate(-2px, 1px) rotate(-1deg); }
    40%      { transform: translate(1px, -1px) rotate(1deg); }
    60%      { transform: translate(-1px, -2px) rotate(0deg); }
    80%      { transform: translate(2px, 2px) rotate(1deg); }
}
@keyframes wingFlutter {
    0%, 100% { transform: scaleX(1); }
    50%      { transform: scaleX(0.4); }
}

.animate-float          { animation: float 4s ease-in-out infinite; }
.animate-float-delayed  { animation: float 4.5s ease-in-out infinite; animation-delay: 1.5s; }
.animate-buzz           { animation: buzz 0.3s ease-in-out infinite alternate; }

.wing-left  { transform-origin: right center; animation: wingFlutter 0.15s ease-in-out infinite; }
.wing-right { transform-origin: left center;  animation: wingFlutter 0.15s ease-in-out infinite; }

/* Scrollbars inside the cart / chat */
.custom-scrollbar::-webkit-scrollbar        { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track  { background: #fffbeb; }
.custom-scrollbar::-webkit-scrollbar-thumb  { background: #fcd34d; border-radius: 9999px; }

/* ---------------------------------------------------------------------------
   Mobile refinements
   -------------------------------------------------------------------------- */

/* Keep the floating chat widget within tiny viewports */
#chat-bubble {
    width: min(20rem, calc(100vw - 3rem));
}

/* Toast never wider than the screen */
#custom-toast {
    max-width: 92vw;
}

/* Give tap targets a comfortable minimum on touch devices */
@media (hover: none) {
    button, a { -webkit-tap-highlight-color: transparent; }
}

/* ---------------------------------------------------------------------------
   Accessibility: respect users who prefer reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .animate-float,
    .animate-float-delayed,
    .animate-buzz,
    .wing-left,
    .wing-right,
    .animate-bounce,
    .animate-ping,
    .animate-pulse {
        animation: none !important;
    }
    * { scroll-behavior: auto !important; }
}

/* Visible keyboard focus for accessibility */
:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
    border-radius: 6px;
}