/* ============================================================
   MIX OF PASSWORD v4.1 — АНИМАЦИИ
   Описание: Все анимации и стили для всплывающих сообщений
   ============================================================ */

/* ============================================================
   АНИМАЦИИ (@keyframes)
   ============================================================ */

/* --- Градиентная полоса (шапка контейнера) --- */
@keyframes mixpwGradientShift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* --- Пульсация логотипа --- */
@keyframes mixpwLogoPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* --- Встряска (для ошибок и генерации) --- */
@keyframes mixpwShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* --- Плавное появление (Fade In) --- */
@keyframes mixpwFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Появление элементов истории (с заездом слева) --- */
@keyframes mixpwItemAppear {
    0%   { opacity: 0; transform: translateX(-10px) scale(0.98); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* --- Встряска для ошибок (более сильная) --- */
@keyframes mixpwErrorShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

/* ============================================================
   СООБЩЕНИЯ ОБ ОШИБКАХ И ДЕЙСТВИЯХ
   ============================================================ */

/* --- Сообщение об ошибке экспорта --- */
.mixpw-export-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 12px;
    margin-bottom: 12px;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: var(--mixpw-radius-sm);
    color: #dc3545;
    font-size: 14px;
    font-weight: 500;
    animation: mixpwErrorShake 0.5s ease;
}

.mixpw-export-error .mix-file-error {
    font-size: 1.4em;
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
    color: #dc3545;
}

/* --- Сообщение об успешном удалении истории --- */
.mixpw-delete-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 12px 0;
    background: rgba(107, 142, 35, 0.10);
    border: 1px solid rgba(107, 142, 35, 0.30);
    border-radius: var(--mixpw-radius-sm);
    color: var(--mixpw-success);
    font-size: 14px;
    font-weight: 500;
    animation: mixpwFadeIn 0.4s ease;
}

.mixpw-delete-success .mix-delete-ok {
    font-size: 1.4em;
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
    color: var(--mixpw-success);
}

/* --- Сообщение об ошибке удаления истории --- */
.mixpw-delete-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 12px 0;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: var(--mixpw-radius-sm);
    color: #dc3545;
    font-size: 14px;
    font-weight: 500;
    animation: mixpwErrorShake 0.5s ease;
}

.mixpw-delete-error .mix-error {
    font-size: 1.4em;
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
    color: #dc3545;
}