/* =========================================================================
   МЕДКОНСУЛЬТАЦИЯ — СИСТЕМА УВЕДОМЛЕНИЙ (notifications.css)
   =========================================================================
   Toast (замена alert()) + Confirm/Prompt Modal (замена confirm()/prompt()).
   Аддитивный слой, использует токены из design-tokens.css. Подключается
   последним, после responsive.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOAST — контейнер и карточки
   ------------------------------------------------------------------------- */
#toast-viewport {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse; /* новые снизу, растут вверх */
    align-items: center;
    gap: 10px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none; /* клики проходят сквозь пустое пространство контейнера */
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 13px 14px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--color-neutral);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-family-base);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-primary);
    box-sizing: border-box;

    /* Появление: fade-in + slide-up */
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    animation: toast-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;

    /* Свайп горизонтально для закрытия (JS выставляет --swipe-x) */
    touch-action: pan-y;
    --swipe-x: 0px;
    translate: var(--swipe-x) 0;
}
.toast.is-leaving {
    animation: toast-out 0.22s ease-in forwards;
}
.toast.is-dragging { transition: none; }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(8px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
    .toast { animation-duration: 0.01ms !important; }
}

.toast-icon {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    margin-top: 1px;
}
.toast-body { flex: 1 1 auto; min-width: 0; }
.toast-title { font-weight: var(--font-weight-semibold); margin-bottom: 2px; }
.toast-message { color: var(--text-secondary); word-wrap: break-word; }
.toast-close {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; cursor: pointer;
    color: var(--text-muted); border-radius: var(--radius-sm);
    font-size: 13px; margin: -4px -4px -4px 0;
    transition: background-color 0.15s, color 0.15s;
}
.toast-close:hover { background: var(--surface-card-sunken); color: var(--text-primary); }

/* Прогресс-полоска автозакрытия */
.toast-progress {
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: 100%;
    background: currentColor;
    opacity: 0.25;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transform-origin: left;
    animation: toast-progress linear forwards;
}
.toast { position: relative; overflow: hidden; }
@keyframes toast-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* --- Варианты статуса --- */
.toast-success { border-left-color: var(--color-success); }
.toast-success .toast-icon { background: var(--color-success-subtle); color: var(--color-success); }
.toast-success .toast-progress { color: var(--color-success); }

.toast-error { border-left-color: var(--color-danger); }
.toast-error .toast-icon { background: var(--color-danger-subtle); color: var(--color-danger); }
.toast-error .toast-progress { color: var(--color-danger); }

.toast-warning { border-left-color: var(--color-warning); }
.toast-warning .toast-icon { background: var(--color-warning-subtle); color: var(--color-warning); }
.toast-warning .toast-progress { color: var(--color-warning); }

.toast-info { border-left-color: var(--color-info); }
.toast-info .toast-icon { background: var(--color-info-subtle); color: var(--color-info); }
.toast-info .toast-progress { color: var(--color-info); }


/* -------------------------------------------------------------------------
   2. CONFIRM / PROMPT MODAL
   ------------------------------------------------------------------------- */
.app-modal-backdrop {
    position: fixed; inset: 0;
    background: var(--surface-overlay);
    z-index: 10050;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    animation: modal-backdrop-in 0.18s ease forwards;
}
.app-modal-backdrop.is-leaving { animation: modal-backdrop-out 0.16s ease forwards; }
@keyframes modal-backdrop-in { to { opacity: 1; } }
@keyframes modal-backdrop-out { to { opacity: 0; } }

.app-modal-box {
    width: 100%;
    max-width: 420px;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px;
    box-sizing: border-box;
    font-family: var(--font-family-base);
    /* Базовое состояние — конечное, видимое. Раньше здесь стояли
       opacity:0 и transform, а видимость держалась исключительно за счёт
       animation ... forwards. Стоило любому другому правилу перебить
       свойство animation (например, качанию головой при промахе мимо
       окна), как диалог мгновенно становился прозрачным, а после снятия
       класса влетал заново — это и давало мерцание. */
}
.app-modal-box.is-entering { animation: modal-box-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
.app-modal-backdrop.is-leaving .app-modal-box { animation: modal-box-out 0.16s ease forwards; }
@keyframes modal-box-in  { from { transform: translateY(10px) scale(0.97); opacity: 0; }
                           to   { transform: translateY(0)    scale(1);    opacity: 1; } }
@keyframes modal-box-out { to { transform: translateY(6px) scale(0.97); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .app-modal-backdrop, .app-modal-box { animation-duration: 0.01ms !important; }
}

.app-modal-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    margin-bottom: 14px;
}
.app-modal-box.variant-danger .app-modal-icon  { background: var(--color-danger-subtle); color: var(--color-danger); }
.app-modal-box.variant-warning .app-modal-icon { background: var(--color-warning-subtle); color: var(--color-warning); }
.app-modal-box.variant-default .app-modal-icon { background: var(--color-primary-subtle); color: var(--color-primary); }

.app-modal-title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: var(--leading-tight);
    margin-bottom: 8px;
}
.app-modal-message {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    white-space: pre-line;
}
.app-modal-input {
    width: 100%;
    margin-top: 14px;
    box-sizing: border-box;
    /* остальные визуальные свойства (граница/фон/паддинг/фокус) наследуются
       от общего правила input в design-tokens.css — здесь только раскладка */
}
.app-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}
.app-modal-actions button {
    min-height: 42px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s, border-color 0.15s, transform 0.05s;
}
.app-modal-actions button:active { transform: scale(0.97); }

.app-modal-btn-cancel {
    background: var(--surface-card-sunken);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
}
.app-modal-btn-cancel:hover { background: var(--surface-input-hover); border-color: var(--border-default); }

.app-modal-btn-confirm {
    background: var(--color-primary);
    color: #fff;
}
.app-modal-btn-confirm:hover { background: var(--color-primary-hover); }
.app-modal-box.variant-danger .app-modal-btn-confirm { background: var(--color-danger); }
.app-modal-box.variant-danger .app-modal-btn-confirm:hover { background: #B91C1C; }
.app-modal-box.variant-warning .app-modal-btn-confirm { background: var(--color-warning); }
.app-modal-box.variant-warning .app-modal-btn-confirm:hover { background: #B45309; }

/* Нижняя панель действий становится fixed на том же брейкпоинте, что и в
   responsive.css (max-width:767px) — поднимаем тосты над ней там же.
   Реальная высота панели (кнопки + паддинги) измерена в браузере — 87px;
   берём 100px с запасом, чтобы не зависеть от точного пиксель-в-пиксель
   совпадения при будущих правках панели. */
@media (max-width: 767px) {
    #toast-viewport {
        width: calc(100vw - 24px);
        bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }
}

/* Мобильный сценарий — во всю ширину, крупные тач-цели */
@media (max-width: 480px) {
    .app-modal-box { padding: 20px; }
    .app-modal-actions { flex-direction: column-reverse; }
    .app-modal-actions button { width: 100%; min-height: 46px; }
}