/* =========================================================
   Notifications (flash messages) — verre transparent + accent
   de couleur par type + entrée « mise au point ».
   Voir POC design-poc/notifications.html.
   Le contrôleur Stimulus `flash` gère l'auto-fermeture, la pause
   au survol et ajoute .flash-message-removing pour la sortie.
   ========================================================= */

.flash-messages-wrapper {
    position: fixed;
    top: calc(var(--navbar-height, 86px) + 12px);
    right: 20px;
    width: 380px;
    max-width: calc(100vw - 40px);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flash-message {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0.85rem 0.9rem 0.9rem;
    border-radius: var(--radius);
    color: var(--text);

    /* Transparence « verre », cohérente avec la barre du haut
       (fallback plein pour les navigateurs sans color-mix) */
    background: var(--surface-2);
    background: color-mix(in srgb, var(--surface-2) 50%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow);
    overflow: hidden;

    /* Entrée : arrive floue + réduite, se nette avec un léger ressort,
       et un halo de la couleur du type éclot puis se résorbe dans l'ombre. */
    animation: flashIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Accent de couleur par type */
.flash-message.success { --accent: var(--success); --accent-soft: var(--success-soft); --accent-glow: rgba(79, 174, 139, 0.5); }
.flash-message.error   { --accent: var(--danger);  --accent-soft: var(--danger-soft);  --accent-glow: rgba(226, 98, 91, 0.5); }
.flash-message.warning { --accent: var(--warning); --accent-soft: var(--warning-soft); --accent-glow: rgba(224, 171, 51, 0.5); }
.flash-message.info    { --accent: #57a6c9;        --accent-soft: rgba(87, 166, 201, 0.16); --accent-glow: rgba(87, 166, 201, 0.5); }

/* Liseré vertical qui pousse à l'apparition */
.flash-message::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    animation: flashAccent 0.5s 0.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Pastille d'icône colorée ; l'icône se dessine (tracé) */
.flash-message-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--border-strong);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    animation: flashIcoPop 0.5s 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.flash-message-icon svg { display: block; }
.flash-message-icon svg [pathLength] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: flashIcoDraw 0.55s 0.26s ease forwards;
}

.flash-message-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 1px;
    animation: flashBodyIn 0.5s 0.16s ease both;
}
.flash-message-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
}
.flash-message-text {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 0.1rem;
    word-wrap: break-word;
}

.flash-message-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--text-faint);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: 0.15s;
    margin: -2px -2px 0 0;
    animation: flashBodyIn 0.5s 0.22s ease both;
}
.flash-message-close:hover {
    background: var(--hover);
    color: var(--text);
}

/* Sortie (classe posée par le contrôleur ; suppression à 300ms côté JS) */
.flash-message-removing {
    animation: flashOut 0.3s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes flashIn {
    0%   { opacity: 0; transform: translateX(115%) scale(0.9); filter: blur(6px); box-shadow: 0 0 30px 2px var(--accent-glow); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); box-shadow: var(--shadow); }
}
@keyframes flashOut {
    from { opacity: 1; transform: translateX(0) scale(1); max-height: 140px; }
    to   { opacity: 0; transform: translateX(115%) scale(0.96); max-height: 0; margin-top: -12px; padding-top: 0; padding-bottom: 0; }
}
@keyframes flashAccent { to { transform: scaleY(1); } }
@keyframes flashIcoPop { from { transform: scale(0.35); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes flashIcoDraw { to { stroke-dashoffset: 0; } }
@keyframes flashBodyIn { from { opacity: 0; transform: translateX(7px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .flash-message,
    .flash-message *,
    .flash-message::before { animation: none !important; }
    .flash-message-icon svg [pathLength] { stroke-dashoffset: 0; }
}

@media (max-width: 768px) {
    .flash-messages-wrapper {
        left: 20px;
        right: 20px;
        width: auto;
    }
}