/* Global panic FAB — round, icon-only.
 *
 * A COPY of apps/legacy/chronos-uat/css/panic-fab.css, byte for byte below
 * this note, so the button is the same on both tiers (the Go layout mounts
 * it for officers; docs/design/go-task-officer-feeds.md).
 *
 * Rendered into the main layout for any user whose user-group has
 * grupo_usuario_fl_tecnico = TRUE (the WebUser::isOfficer gate). RTL-safe
 * via inset-inline-* logical properties. Dark mode falls out of Bootstrap
 * btn-* CSS variables.
 */
.chronos-panic-fab {
    position: fixed;
    /* Stack above the chronos-agent-fab (1.25rem + 3.25rem ≈ 4.5rem) so a
     * chat panel never hides the panic button on small viewports. */
    inset-block-end: 5.5rem;
    inset-inline-end: 1.25rem;
    /* One above the chat FAB (1100) so panic always wins focus order. */
    z-index: 1101;

    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border-radius: 50%;

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

    box-shadow: 0 .5rem 1.5rem rgba(220, 53, 69, .35);
    line-height: 1;
}

.chronos-panic-fab i {
    font-size: 1.4rem;
    /* Icon-only — drop any inherited horizontal margin from `me-1` etc. */
    margin: 0 !important;
}

.chronos-panic-fab:focus-visible {
    outline: 3px solid var(--bs-warning);
    outline-offset: 3px;
}

.chronos-panic-fab[aria-busy="true"] {
    pointer-events: none;
    opacity: .85;
}

@media (prefers-reduced-motion: no-preference) {
    .chronos-panic-fab {
        transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    .chronos-panic-fab:hover {
        transform: translateY(-1px);
        box-shadow: 0 .65rem 1.75rem rgba(220, 53, 69, .45);
    }
}

@media (max-width: 575.98px) {
    .chronos-panic-fab {
        inset-block-end: 4.75rem;
        width: 3.25rem;
        height: 3.25rem;
    }
    .chronos-panic-fab i { font-size: 1.25rem; }
}

/* Visually-hidden aria-live region for screen-reader status updates. */
.chronos-panic-fab__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
