/* =====================================================
   QA AskMe — floating assistant launcher.
   Rendered by Components/Chatbot/ChatbotFab.razor, which is
   mounted in Routes.razor and so sits above every layout.
   Uses tokens.css directly (no MudThemeProvider at that level).
   ===================================================== */

/* MudBlazor's z-index scale: drawer 1100, popover 1200, appbar 1300,
   dialog 1400, snackbar 1500, tooltip 1600. Sitting at 1150 keeps the
   bubble above page content and the docked drawer, but lets menus,
   dialogs and snackbars cover it — a modal must never be click-blocked. */
.chatbot-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1150;

    width: 56px;
    height: 56px;
    border-radius: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--cas-gradient-hero);
    color: #fff;
    text-decoration: none;

    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--cas-shadow-overlay);

    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.chatbot-fab:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
    box-shadow: 0 16px 44px rgba(15, 32, 39, 0.34);
}

.chatbot-fab:active {
    transform: translateY(0);
}

/* The bubble is dark chrome, so signal-cyan is the correct focus accent here. */
.chatbot-fab:focus-visible {
    outline: 3px solid var(--cas-signal-cyan);
    outline-offset: 3px;
}

.chatbot-fab-glyph {
    width: 26px;
    height: 26px;
    display: block;
    fill: currentColor;
}

/* Speech-bubble dots read as "conversation" without needing a label. */
.chatbot-fab-dot {
    fill: var(--cas-navy-900);
}

@media (max-width: 600px) {
    .chatbot-fab {
        right: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
    }

    .chatbot-fab-glyph {
        width: 23px;
        height: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chatbot-fab {
        transition: none;
    }

    .chatbot-fab:hover {
        transform: none;
    }
}