/* ============================================================================
   KOSIS — assets/css/kosis-messages-actions.css
   ----------------------------------------------------------------------------
   v1.0 · 12 Jun 2026

   Styles for the Messages feed "instant own actions" feature (Session 18 PR1,
   stage C-2): when a user's own action — new post, comment, reaction, edit,
   delete, or pin — is applied via fetch with no full-page reload, the server's
   confirmation/error text is shown as a brief, self-dismissing flash injected
   just under the channel-tab bar.

   This sheet contains ONLY the transient-flash presentation. The base flash
   colours (.kosis-flash / .kosis-flash-success / .kosis-flash-error) come from
   kosis-dashboard.css; this adds the enter + leave transitions so the message
   fades in and out instead of popping. The fetch wiring lives in kosis.js §13;
   the JSON response path lives in pages/messages.php.

   LOAD ORDER (head-dashboard.php): loaded LAST, immediately after
   kosis-pages.css, so it inherits the design tokens and the base flash styles.
   It defines a single, self-contained component and touches nothing else.
   ========================================================================= */


/* -- Transient flash (instant own actions) --------------------------------- */

/*  A flash injected by kosis.js after an own action applies without a reload.
    It carries the base .kosis-flash + .kosis-flash-{success|error} classes for
    colour; this class only adds the fade transitions. */
.ks-flash-transient {
    transition: opacity .3s ease, transform .3s ease;
}

/*  Enter animation — slide down + fade in. Respects reduced-motion: users who
    prefer no motion simply see the flash appear without the slide. */
@media (prefers-reduced-motion: no-preference) {
    .ks-flash-transient {
        animation: ksFlashIn .25s ease-out;
    }
    @keyframes ksFlashIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/*  Leave state — kosis.js adds .is-leaving shortly before removing the node,
    so the flash fades out smoothly rather than vanishing. */
.ks-flash-transient.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
}