/* Notifications: inline error-box and floating toasts */

.error-box,
.toast {
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.error-box {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-text);
}
.error-box::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: var(--error-text);
    margin-top: 1px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><mask id='c'><rect width='16' height='16' fill='white'/><rect x='7.2' y='3.5' width='1.6' height='5.2' rx='0.8' fill='black'/><circle cx='8' cy='11.6' r='1' fill='black'/></mask><circle cx='8' cy='8' r='8' fill='black' mask='url(%23c)'/></svg>") center/16px 16px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><mask id='c'><rect width='16' height='16' fill='white'/><rect x='7.2' y='3.5' width='1.6' height='5.2' rx='0.8' fill='black'/><circle cx='8' cy='11.6' r='1' fill='black'/></mask><circle cx='8' cy='8' r='8' fill='black' mask='url(%23c)'/></svg>") center/16px 16px no-repeat;
}

#toast-container {
    position: fixed;
    top: max(80px, calc(env(safe-area-inset-top) + 72px));
    right: max(16px, env(safe-area-inset-right));
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}
.toast {
    pointer-events: auto;
    min-width: 260px;
    max-width: 360px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show {
    opacity: 1;
    transform: translateX(0);
}
.toast.success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success-text);
}
.toast.success::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: var(--success-text);
    margin-top: 1px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><mask id='c'><rect width='16' height='16' fill='white'/><path d='M4.5 8.3l2.2 2.2L11.5 5.7' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></mask><circle cx='8' cy='8' r='8' fill='black' mask='url(%23c)'/></svg>") center/16px 16px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><mask id='c'><rect width='16' height='16' fill='white'/><path d='M4.5 8.3l2.2 2.2L11.5 5.7' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></mask><circle cx='8' cy='8' r='8' fill='black' mask='url(%23c)'/></svg>") center/16px 16px no-repeat;
}
.toast.error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-text);
}
.toast.error::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: var(--error-text);
    margin-top: 1px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><mask id='c'><rect width='16' height='16' fill='white'/><rect x='7.2' y='3.5' width='1.6' height='5.2' rx='0.8' fill='black'/><circle cx='8' cy='11.6' r='1' fill='black'/></mask><circle cx='8' cy='8' r='8' fill='black' mask='url(%23c)'/></svg>") center/16px 16px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><mask id='c'><rect width='16' height='16' fill='white'/><rect x='7.2' y='3.5' width='1.6' height='5.2' rx='0.8' fill='black'/><circle cx='8' cy='11.6' r='1' fill='black'/></mask><circle cx='8' cy='8' r='8' fill='black' mask='url(%23c)'/></svg>") center/16px 16px no-repeat;
}
.toast-msg {
    flex: 1;
    word-break: break-word;
}
.toast-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    margin: -2px -4px 0 0;
    cursor: pointer;
    opacity: 0.7;
    font-family: inherit;
}
.toast-close:hover { opacity: 1; }
.toast-close:focus-visible {
    outline: none;
    opacity: 1;
    box-shadow: 0 0 0 2px var(--focus-ring);
    border-radius: 2px;
}
@media (max-width: 480px) {
    #toast-container {
        top: max(68px, calc(env(safe-area-inset-top) + 60px));
        right: max(8px, env(safe-area-inset-right));
        left: max(8px, env(safe-area-inset-left));
        max-width: none;
    }
    .toast { min-width: 0; max-width: none; }
}