/* Тема тостов приложения поверх вендорного iziToast: компактная строка с иконкой тона,
   текстом, действием и закрытием. Селекторы повторяют вендорные (`.iziToast > .iziToast-body …`) —
   иначе тема проигрывает им по специфичности; `!important` стоит там, где геометрию вендор
   проставляет инлайновым стилем из своего JS. */

.iziToast-wrapper {
    /* Нижнюю зону задаёт страница: под мобильной панелью тост не прячется. */
    padding: 0 16px calc(var(--app-toast-bottom, 16px) + env(safe-area-inset-bottom));
    gap: 8px;
}

.iziToast.app-toast {
    width: auto;
    max-width: min(520px, 100%);
    min-height: 0;
    padding: 9px 8px 9px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: #131a28;
    box-shadow: none;
    font-family: Manrope, system-ui, sans-serif;
}

.iziToast.app-toast::after {
    display: none;
}

.iziToast.app-toast > .iziToast-body {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 26px 0 26px !important;
    min-height: 22px;
}

.iziToast.app-toast > .iziToast-body .iziToast-texts {
    flex: 1;
    min-width: 0;
    float: none;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.iziToast.app-toast > .iziToast-body .iziToast-title {
    display: inline;
    float: none;
    margin: 0;
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    white-space: inherit;
}

.iziToast.app-toast > .iziToast-body .iziToast-message {
    display: inline;
    float: none;
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    white-space: inherit;
}

/* Название объекта идёт в той же строке за заголовком, отделённое точкой. */
.iziToast.app-toast > .iziToast-body .iziToast-message::before {
    content: "·";
    margin: 0 6px;
    color: #475569;
}

/* Иконка тона: знак без плашки, цвет несёт смысл сообщения. */
.iziToast.app-toast > .iziToast-body .iziToast-icon.app-toast-icon {
    left: 0 !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: -9px !important;
    box-sizing: border-box;
    background-color: currentColor;
    opacity: 1;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
}

.iziToast.app-toast--info > .iziToast-body .iziToast-icon.app-toast-icon {
    color: #a5b4fc;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Cpath d='M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Cpath d='M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4'/%3E%3C/svg%3E");
}

.iziToast.app-toast--success > .iziToast-body .iziToast-icon.app-toast-icon {
    color: #34d399;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
}

.iziToast.app-toast--warning > .iziToast-body .iziToast-icon.app-toast-icon {
    color: #fcd34d;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v5M12 17h.01M10.3 4.4 2.8 17.3A1.8 1.8 0 0 0 4.4 20h15.2a1.8 1.8 0 0 0 1.6-2.7L13.7 4.4a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v5M12 17h.01M10.3 4.4 2.8 17.3A1.8 1.8 0 0 0 4.4 20h15.2a1.8 1.8 0 0 0 1.6-2.7L13.7 4.4a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
}

.iziToast.app-toast--error > .iziToast-body .iziToast-icon.app-toast-icon {
    color: #fb7185;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}

/* Действие стоит в той же строке справа и не спорит с текстом за внимание. */
.iziToast.app-toast > .iziToast-body .iziToast-buttons {
    flex: none;
    float: none;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.iziToast.app-toast > .iziToast-body .iziToast-buttons > .app-toast-action {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #67e8f9;
    font: 600 12.5px/1 Manrope, system-ui, sans-serif;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.iziToast.app-toast > .iziToast-body .iziToast-buttons > .app-toast-action:hover {
    background: rgba(34, 211, 238, 0.12);
    color: #cffafe;
}

.iziToast.app-toast > .iziToast-body .iziToast-buttons > .app-toast-action:focus-visible,
.iziToast.app-toast > .iziToast-close:focus-visible {
    outline: 2px solid rgba(34, 211, 238, 0.65);
    outline-offset: 2px;
}

.iziToast.app-toast > .iziToast-close {
    width: 24px;
    height: 24px;
    right: 8px;
    top: 50%;
    margin-top: -12px;
    border-radius: 6px;
    opacity: 1;
    background: none;
    color: #64748b;
}

/* Кнопка мелкая, но попасть по ней можно пальцем: область нажатия шире рисунка. */
.iziToast.app-toast > .iziToast-close::before {
    content: "";
    position: absolute;
    inset: -10px;
}

.iziToast.app-toast > .iziToast-close::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 14px 14px;
    mask-size: 14px 14px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.iziToast.app-toast > .iziToast-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

.iziToast.app-toast > .iziToast-progressbar {
    top: auto;
    bottom: 0;
    height: 2px;
    background: transparent;
}

.iziToast.app-toast > .iziToast-progressbar > div {
    height: 2px;
    border-radius: 0 0 12px 12px;
}

.iziToast.app-toast--info > .iziToast-progressbar > div {
    background: rgba(165, 180, 252, 0.7);
}

.iziToast.app-toast--success > .iziToast-progressbar > div {
    background: rgba(52, 211, 153, 0.7);
}

.iziToast.app-toast--warning > .iziToast-progressbar > div {
    background: rgba(252, 211, 77, 0.7);
}

.iziToast.app-toast--error > .iziToast-progressbar > div {
    background: rgba(251, 113, 133, 0.7);
}

/* Узкий экран: сообщение во всю ширину, название объекта уходит во вторую строку. */
@media (max-width: 768px) {
    .iziToast.app-toast {
        width: 100%;
        max-width: none;
    }

    .iziToast.app-toast > .iziToast-body .iziToast-texts {
        display: flex;
        flex-direction: column;
    }

    .iziToast.app-toast > .iziToast-body .iziToast-title,
    .iziToast.app-toast > .iziToast-body .iziToast-message {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 18px;
    }

    .iziToast.app-toast > .iziToast-body .iziToast-message::before {
        content: none;
    }
}