/* Notification live region — fixed bottom-right */
.notif-region {
    position         : fixed;
    bottom           : 24px;
    right            : 24px;
    z-index          : 9999;
    display          : flex;
    flex-direction   : column;
    gap              : 8px;
    width            : 400px;
    pointer-events   : none;
}

/* Individual notification */
.notif {
    border           : 2px solid var(--color-border-solid);
    background       : var(--color-bg);
    pointer-events   : all;
}

/* Header strip */
.notif-header {
    display          : flex;
    align-items      : center;
    justify-content  : space-between;
    padding          : 5px 12px;
    background       : var(--color-panel-dark);
}

.notif-header-error {
    background       : var(--color-accent);
}

.notif-header-label {
    font-family      : "Courier New", monospace;
    font-size        : 0.65rem;
    font-weight      : 700;
    text-transform   : uppercase;
    letter-spacing   : 0.2em;
    color            : var(--color-panel-text);
}

.notif-timestamp {
    font-family      : "Courier New", monospace;
    font-size        : 0.6rem;
    letter-spacing   : 0.08em;
    color            : rgba(242, 239, 233, 0.5);
}

/* Body */
.notif-body {
    display          : flex;
    align-items      : flex-start;
    gap              : 12px;
    padding          : 12px 14px;
    border-top       : 1px solid var(--color-border-solid);
}

/* Icon cell */
.notif-icon {
    flex-shrink      : 0;
    width            : 32px;
    height           : 32px;
    border           : 1.5px solid var(--color-border-solid);
    display          : flex;
    align-items      : center;
    justify-content  : center;
    font-family      : "Courier New", monospace;
    font-size        : 14px;
    font-weight      : 700;
    color            : var(--color-text);
    margin-top       : 1px;
}

.notif-icon-error {
    border-color     : var(--color-accent);
    color            : var(--color-accent);
}

.notif-icon-info {
    border-color     : var(--color-teal);
    color            : var(--color-teal);
}

/* Text */
.notif-msg {
    font-family      : "Courier New", monospace;
    font-size        : 0.68rem;
    color            : rgba(26, 26, 26, 0.65);
    line-height      : 1.5;
    letter-spacing   : 0.02em;
    flex             : 1;
}

/* Dismiss button */
.notif-close {
    background       : none;
    border           : 1px solid var(--color-border-solid);
    cursor           : pointer;
    width            : 20px;
    height           : 20px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    flex-shrink      : 0;
    margin-top       : 1px;
    color            : var(--color-text);
    font-family      : "Courier New", monospace;
    font-size        : 0.6rem;
    font-weight      : 700;
}

.notif-close:hover {
    background       : var(--color-text);
    color            : var(--color-bg);
}

.notif-close-error {
    border-color     : var(--color-accent);
    color            : var(--color-accent);
}