/* ═══════════════════════════════════════════════════════════
   UMWEKA ACADEMY — Floating Quick-Help Buttons
   (AI Tutor + WhatsApp) — see app/Views/components/floating-widgets.php
═══════════════════════════════════════════════════════════ */

.uw-float-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9982;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none; /* re-enabled per-button below so the empty gap isn't clickable */
}

.uw-float-btn {
    pointer-events: auto;
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.28);
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
.uw-float-btn:hover,
.uw-float-btn:focus-visible {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 26px rgba(0,0,0,0.34);
}
.uw-float-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.uw-float-ai {
    background: linear-gradient(135deg, var(--primary, #0d6efd), #6f42c1);
}
.uw-float-ai::after {
    /* Gentle attention pulse — subtle, not the whole page's problem */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(13,110,253,0.55);
    animation: uw-float-pulse 2.6s ease-out infinite;
    pointer-events: none;
}

.uw-float-whatsapp {
    background: #25D366;
}

@keyframes uw-float-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(13,110,253,0.45); }
    70%  { box-shadow: 0 0 0 14px rgba(13,110,253,0); }
    100% { box-shadow: 0 0 0 0 rgba(13,110,253,0); }
}

/* Tooltip — desktop hover only; on touch devices the buttons are
   self-explanatory (icon + platform-standard WhatsApp green) so we
   don't rely on it. */
.uw-float-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #0d1117;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
@media (hover: hover) {
    .uw-float-btn:hover .uw-float-tooltip,
    .uw-float-btn:focus-visible .uw-float-tooltip {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 640px) {
    .uw-float-stack { right: 14px; bottom: 14px; gap: 10px; }
    .uw-float-btn   { width: 50px; height: 50px; }
    .uw-float-tooltip { display: none; } /* no hover on touch; avoid stray tap targets */
}

/* ── AI Tutor chat page override ──────────────────────────────
   On /ai/tutor the AI Tutor button is dropped server-side (see
   floating-widgets.php — redundant on its own chat page), leaving only
   WhatsApp here. Below the width where the sidebar hides and the chat
   panel goes full-width (see the matching 680px/768px breakpoints in
   ai.css), the chat composer (.ai-input-area) sits close to the bottom
   of the viewport, so this button is lifted clear of it instead of
   floating on top of the message box / send button. */
@media (max-width: 768px) {
    .uw-float-stack--chat { bottom: 92px; }
}
@media (max-width: 640px) {
    .uw-float-stack--chat { bottom: 86px; }
}