/* ===== Ask DEX pill (app bar) =====
   Motion treatment 1a "Sparkle twinkle" from the Ask DEX button animation study:
   the pill itself never moves — the sparkle flicks and settles every four seconds with a
   soft glow behind it. It is the quietest of the eight options, which is what a control
   living in the app bar for eight hours a day needs.

   Colours resolve from the palette rather than the study's literal #155DFC / #B8D5F9, so
   the tenant-operator red reaches the pill like it reaches everything else. */

.dex-icon-button,
.dex-icon-button svg {
    color: var(--mud-palette-appbar-text, var(--mud-palette-text-primary)) !important;
}

.ask-dex-button {
    border-radius: 999px;
    font-weight: 600;
    /* The study's pale blue outline, expressed as the rule line tinted toward the action
       colour. The plain declaration is the fallback where color-mix is unsupported. */
    --adx-rule: var(--mud-palette-lines-default);
    --adx-rule: color-mix(in srgb, var(--mud-palette-secondary) 35%, var(--mud-palette-lines-default));
    --adx-spark-glow: var(--mud-palette-secondary);
    --adx-spark-glow: color-mix(in srgb, var(--mud-palette-secondary) 55%, transparent);
}

.ask-dex-button.mud-button-root,
.ask-dex-button.mud-icon-button {
    overflow: visible !important;
    position: relative;
    border-color: var(--adx-rule) !important;
    transition: border-color 120ms cubic-bezier(.4, 0, .2, 1), transform 120ms cubic-bezier(.4, 0, .2, 1);
}

/* 1a's hover: the outline resolves to the full action colour. No shadow — buttons in this
   system are shadowless at every state. */
.ask-dex-button.mud-button-root:hover,
.ask-dex-button.mud-icon-button:hover,
.ask-dex-button.mud-button-root:focus-visible,
.ask-dex-button.mud-icon-button:focus-visible {
    border-color: var(--mud-palette-secondary) !important;
}

.ask-dex-button.mud-button-root:active,
.ask-dex-button.mud-icon-button:active {
    transform: scale(.985);
}

/* The sparkle: a flick and settle on a 4s cycle, quiet for the first two thirds of it.
   The glow rides a second animation on the same element — drop-shadow rather than a
   radial-gradient layer because MudBlazor renders the icon as an <svg>, which cannot
   carry pseudo-elements, and because it needs no brittle geometry against the button's
   padding. (The documented drop-shadow ban covers card shadows and the iOS compositing
   halo between stacked cards; a single 20px glyph is not that case.) */
.ask-dex-button .mud-icon-root {
    transform-origin: center;
    animation: askDexTwinkle 4s ease-in-out infinite, askDexTwinkleGlow 4s ease-in-out infinite;
}

@keyframes askDexTwinkle {
    0%, 68%, 100% {
        transform: rotate(0deg) scale(1);
    }

    76% {
        transform: rotate(-20deg) scale(1.2);
    }

    84% {
        transform: rotate(14deg) scale(.9);
    }

    92% {
        transform: rotate(0deg) scale(1.06);
    }
}

@keyframes askDexTwinkleGlow {
    0%, 68%, 100% {
        filter: drop-shadow(0 0 0 transparent);
    }

    80% {
        filter: drop-shadow(0 0 5px var(--adx-spark-glow));
    }

    92% {
        filter: drop-shadow(0 0 0 transparent);
    }
}

/* Anchor wrapper so the DEX-suggests teaser can point back at the pill. */
.ask-dex-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Pill "armed" state — suggestions waiting or an alert on screen. The outline goes to the
   full action colour and holds there, which is the same end point hover reaches, so the
   two read as one vocabulary rather than two. */
.ask-dex-armed.ask-dex-button.mud-button-root,
.ask-dex-armed.ask-dex-button.mud-icon-button {
    border-color: var(--mud-palette-secondary) !important;
}

/* Suppress Mud's own shadow on the armed pill — but not while the halo is travelling: the
   halo IS a box-shadow, and an !important reset outranks an animated declaration, which
   would otherwise make the pulse invisible exactly when suggestions are waiting. */
.ask-dex-suggestion-glow.ask-dex-button:not(.ask-dex-pulse) {
    box-shadow: none !important;
}

.ask-dex-suggestion-glow.ask-dex-button::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 14px color-mix(in srgb, var(--mud-palette-secondary) 26%, transparent);
    animation: askDexSuggestionGlow 3.8s ease-in-out infinite;
}

/* Count badge on the pill. */
.ask-dex-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 1px 8px;
    min-height: 20px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    background: var(--mud-palette-secondary);
    color: #fff;
    cursor: pointer;
    user-select: none;
    animation: askDexBadgePop .34s cubic-bezier(.16, 1, .3, 1) 1;
}

.ask-dex-badge:hover {
    filter: brightness(1.1);
}

/* Icon-only (SmAndDown) variant: the badge rides the corner of the icon button. */
.ask-dex-icon-wrap {
    position: relative;
    display: inline-flex;
}

.ask-dex-badge-corner {
    position: absolute;
    top: -4px;
    right: 0;
    margin-left: 0;
    padding: 1px 5px;
    box-shadow: 0 0 0 2px var(--mud-palette-surface);
}

/* "Halo pulse" from the animation study: one ring leaves the pill and nothing else moves.
   The study runs it inside a 4s loop where the ring occupies 8%->34% (~1.05s) on the
   standard ease; here the loop is the 25s pulse cadence in MainLayout, so the same shape
   is expressed as a single ~1.05s shot. MainLayout toggles .ask-dex-pulse off -> on so the
   animation replays; re-applying an already-present class would not restart it. */
.ask-dex-pulse {
    /* The study's rgba(21,93,252,.45), resolved from the palette so the tenant-operator
       accent reaches the ring. Plain declaration is the fallback without color-mix. */
    --adx-halo: rgba(21, 93, 252, 0.45);
    --adx-halo: color-mix(in srgb, var(--mud-palette-secondary) 45%, transparent);
    --adx-halo-out: rgba(21, 93, 252, 0);
    --adx-halo-out: color-mix(in srgb, var(--mud-palette-secondary) 0%, transparent);
    animation: askDexHalo 1.05s cubic-bezier(.4, 0, .2, 1) 1;
}

@keyframes askDexHalo {
    0% {
        box-shadow: 0 0 0 0 var(--adx-halo-out);
    }

    /* The study holds the ring tight against the edge at full opacity before it travels —
       that beat is what makes it read as one ring rather than a fade. */
    8% {
        box-shadow: 0 0 0 0 var(--adx-halo);
    }

    100% {
        box-shadow: 0 0 0 12px var(--adx-halo-out);
    }
}

@keyframes askDexBadgePop {
    from {
        transform: scale(.62);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes askDexSuggestionGlow {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.98);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ask-dex-pulse,
    .ask-dex-badge,
    .ask-dex-button .mud-icon-root,
    .ask-dex-suggestion-glow.ask-dex-button::after {
        animation: none;
    }
}