/* css/ui_notify.css - the one notification system (js/ui_notify.js). Replaces css/toastr_modded.css and the
   #ui-status bar. Colours: --c-status-* / --c-armed roles only (css/theme.css). */

/* floating stack, bottom-right above the bottom bar (same spot the toastr stack used) */
#notify_stack {
    position: absolute;
    right: 12px;
    bottom: calc(4px + var(--h_bottom) + var(--ui-base));
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: calc(100% - 24px);
    pointer-events: none;
}

.nt {
    --nt-c: var(--c-status-info);
    position: relative;
    box-sizing: border-box;
    /* text column + a reserved counter column (x3) on the right, so the counter never overlaps the text */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    width: 300px;
    max-width: 100%;
    padding: 8px 14px 8px 12px;
    background: var(--c-scrim);                   /* black frost: dark tint over a blurred backdrop */
    backdrop-filter: blur(var(--pane-blur, 12px));
    -webkit-backdrop-filter: blur(var(--pane-blur, 12px));
    border: 1px solid color-mix(in srgb, var(--nt-c) 50%, transparent);
    border-right: 3px solid var(--nt-c);          /* strong edge on the RIGHT (owner 2026-10-18) */
    border-radius: var(--lv2-btn-radius, 2px);
    color: var(--c-text-soft);
    font-size: 1.15rem;
    line-height: 1.35;
    overflow: hidden;
    overflow-wrap: anywhere;
    pointer-events: auto;
    cursor: pointer;
}
/* top-left facet: bevel like the wide buttons of css/layout_v2.css (clip fallback), a bit deeper (owner 2026-10-18) */
:root { --nt-facet-x: 18px; --nt-facet-y: 7px; }
@supports (corner-shape: bevel) {
    .nt { border-top-left-radius: var(--nt-facet-x) var(--nt-facet-y); corner-top-left-shape: bevel; }
}
@supports not (corner-shape: bevel) {
    .nt { clip-path: polygon(var(--nt-facet-x) 0, 100% 0, 100% 100%, 0 100%, 0 var(--nt-facet-y)); }
}
.nt-info   { --nt-c: var(--c-status-info); }
.nt-muted  { --nt-c: var(--c-status-disabled); }
.nt-ok     { --nt-c: var(--c-status-ok); }
.nt-action { --nt-c: var(--c-armed); }
.nt-warn   { --nt-c: var(--c-status-warn); }
.nt-error  { --nt-c: var(--c-status-danger); }
.nt-busy   { --nt-c: var(--c-status-running); }

.nt-head  { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 8px; }
.nt-title { flex: 1; min-width: 0; color: var(--nt-c); font-weight: bold; }
.nt-time  { color: var(--c-text-dim); font-size: 0.85em; white-space: nowrap; }
.nt-msg   { grid-column: 1; grid-row: 2; }
/* right column: counter + (errors only) copy button, centred vertically */
.nt-side  { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; gap: 6px; }
.nt-count { color: var(--nt-c); font-size: 0.85em; white-space: nowrap; }
.nt-copy  { display: none; width: 18px; height: 18px; padding: 0; border: none; background: transparent; color: var(--nt-c); cursor: pointer; opacity: 0.7; }
.nt-error .nt-copy { display: block; }
.nt-copy:hover { opacity: 1; }
.nt-copy i { display: block; width: 100%; height: 100%; background-color: currentColor;
    -webkit-mask: url(../img/icon/svg/copy.svg) center / 14px no-repeat; mask: url(../img/icon/svg/copy.svg) center / 14px no-repeat; }
.nt-copied .nt-copy { color: var(--c-status-ok); opacity: 1; }
.nt-notitle .nt-msg { color: var(--nt-c); }
#notify_stack .nt-notitle .nt-head { display: none; }

/* busy with progress: indeterminate sweep along the bottom edge */
.nt-prog { grid-column: 1 / -1; grid-row: 3; display: none; height: 2px; margin: 6px -14px -8px -12px; }
.nt-progress .nt-prog {
    display: block;
    background: linear-gradient(90deg, transparent, var(--nt-c), transparent) no-repeat;
    background-size: 40% 100%;
    animation: nt-sweep 1.4s linear infinite;
}
@keyframes nt-sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }

.nt-in { animation: nt-in 0.18s ease-out; }
@keyframes nt-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* NOTIFICATIONS pane (#infopane_tst): live on top, history below */
#notify_pane_list { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
#notify_pane_list .nt { width: 100%; cursor: default; }
#notify_pane_list .nt.nt-click { cursor: pointer; }
#notify_pane_list .nt-old { opacity: 0.55; border-color: var(--c-panel-line); border-right-color: var(--nt-c); }
#notify_pane_empty { padding: 12px; color: var(--c-text-dim); }