/* ============================================================
   Powiadomienia strony w stylu "B — Gotyk" (od 03.10.2026): dymki (toast) i okienko
   potwierdzenia. Zastępują zielone/czerwone toasty Bootstrapa, emoji jako ikony
   i systemowe alert()/confirm() — wygląd jak ag-alert z ui-gothic.css i rama
   z wewnętrzną linią z bloku "STYL B" w _Layout.
   Elementy wiszą w <body> (poza .ag-page), więc reguły są globalne z prefiksem
   .sbx-. Zmienne --g-* pochodzą z :root w _Layout; wartości awaryjne są te same.
   JS: wwwroot/js/ui-notify.js → window.SandboxUI.toast / confirm / alert.
   ============================================================ */

.sbx-toasts {
    position: fixed;
    top: 84px;
    left: 50%;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: min(440px, calc(100vw - 32px));
    transform: translateX(-50%);
    pointer-events: none;
}

.sbx-toast {
    --sbx-accent: var(--g-gold-mid, #c9a14a);
    --sbx-accent-soft: rgba(201,161,74,.14);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 12px 12px 14px 14px;
    color: #e0d3b6;
    font-size: .9rem;
    line-height: 1.45;
    background:
        radial-gradient(circle at 0 0, var(--sbx-accent-soft), transparent 55%),
        linear-gradient(180deg, var(--g-well-2, #2a1c0e), #1b130b);
    border: 1px solid var(--g-gold-dim, #8a6a2a);
    border-left: 4px solid var(--sbx-accent);
    border-radius: 8px;
    box-shadow:
        inset 0 0 0 1px var(--ui-bg, #1a120b),
        inset 0 0 0 2px var(--g-line, #3d2c12),
        0 12px 32px rgba(0,0,0,.65);
    overflow: hidden;
    pointer-events: auto;
    animation: sbx-toast-in .28s cubic-bezier(.2,.8,.25,1);
}

.sbx-toast.is-leaving {
    animation: sbx-toast-out .22s ease-in forwards;
}

.sbx-toast--ok   { --sbx-accent: #a8b25a; --sbx-accent-soft: rgba(168,178,90,.16); }
.sbx-toast--warn { --sbx-accent: #d98c2b; --sbx-accent-soft: rgba(217,140,43,.16); }
.sbx-toast--err  { --sbx-accent: #c0503a; --sbx-accent-soft: rgba(192,80,58,.2); }
.sbx-toast--info { --sbx-accent: var(--g-silver, #cfd3d8); --sbx-accent-soft: rgba(207,211,216,.1); }
.sbx-toast--trade { --sbx-accent: var(--g-gold-mid, #c9a14a); --sbx-accent-soft: rgba(201,161,74,.18); }

/* ikona w pierścieniu — znak rysuje font, kolor daje akcent typu (bez emoji) */
.sbx-toast__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    font: 700 15px/1 Georgia, "Times New Roman", serif;
    color: var(--sbx-accent);
    background: var(--sbx-accent-soft);
    border: 1px solid var(--sbx-accent);
    border-radius: 50%;
    box-shadow: inset 0 0 6px rgba(0,0,0,.5);
}

.sbx-toast__body {
    min-width: 0;
}

.sbx-toast__title {
    margin: 1px 0 3px;
    font-family: var(--g-font, "Cinzel", Georgia, serif);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--g-gold, #e6c77a);
}

.sbx-toast__msg {
    margin: 0;
    color: #e0d3b6;
    overflow-wrap: anywhere;
}

.sbx-toast__msg b {
    color: var(--g-gold-hi, #f0d48a);
    font-weight: 700;
}

.sbx-toast__close {
    width: 26px;
    height: 26px;
    margin: -2px -2px 0 0;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: #9d8f74;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
}

.sbx-toast__close:hover,
.sbx-toast__close:focus-visible {
    color: var(--g-gold-hi, #f0d48a);
    border-color: var(--g-gold-dim, #8a6a2a);
    outline: none;
}

/* pasek czasu u dołu — zatrzymuje się, gdy kursor stoi na dymku */
.sbx-toast__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--sbx-accent);
    opacity: .75;
    transform-origin: left center;
    animation: sbx-toast-bar linear forwards;
    animation-duration: var(--sbx-duration, 4500ms);
}

.sbx-toast:hover .sbx-toast__bar,
.sbx-toast:focus-within .sbx-toast__bar {
    animation-play-state: paused;
}

@keyframes sbx-toast-in {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes sbx-toast-out {
    to { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@keyframes sbx-toast-bar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ── okienko potwierdzenia / informacji (zamiast confirm() / alert()) ── */
.sbx-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11500;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(8,5,3,.72);
    animation: sbx-fade-in .18s ease-out;
}

.sbx-dialog {
    width: min(420px, 100%);
    padding: 18px 18px 16px;
    color: #e0d3b6;
    background: linear-gradient(180deg, var(--g-well-2, #2a1c0e), #1b130b);
    border: 1px solid var(--g-gold-dim, #8a6a2a);
    border-radius: 10px;
    box-shadow:
        inset 0 0 0 1px var(--ui-bg, #1a120b),
        inset 0 0 0 2px var(--g-line, #3d2c12),
        0 18px 48px rgba(0,0,0,.75);
    animation: sbx-toast-in .22s cubic-bezier(.2,.8,.25,1);
}

.sbx-dialog--danger {
    border-color: #8f3a2a;
}

.sbx-dialog__title {
    margin: 0 0 8px;
    font-family: var(--g-font, "Cinzel", Georgia, serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--g-gold, #e6c77a);
}

.sbx-dialog__msg {
    margin: 0;
    font-size: .92rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.sbx-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.sbx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 18px;
    font-family: var(--g-font, "Cinzel", Georgia, serif);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--g-gold-mid, #c9a14a);
    background: transparent;
    border: 1px solid var(--g-gold-dim, #8a6a2a);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.sbx-btn:hover,
.sbx-btn:focus-visible {
    color: var(--g-gold-hi, #f0d48a);
    background: rgba(201,161,74,.08);
    border-color: var(--g-gold-mid, #c9a14a);
    outline: none;
}

.sbx-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--ui-bg, #1a120b), 0 0 0 4px rgba(201,161,74,.75);
}

.sbx-btn--primary {
    color: #1a120b;
    background: linear-gradient(180deg, var(--g-gold-hi, #f0d48a), var(--g-gold-mid, #c9a14a));
    border-color: var(--g-gold-hi, #f0d48a);
}

.sbx-btn--primary:hover,
.sbx-btn--primary:focus-visible {
    color: #1a120b;
    background: var(--g-gold-hi, #f0d48a);
}

.sbx-btn--danger {
    color: #f5d0c6;
    background: #5a1f14;
    border-color: #8f3a2a;
}

.sbx-btn--danger:hover,
.sbx-btn--danger:focus-visible {
    color: #fff;
    background: #6e2618;
    border-color: #c0503a;
}

@keyframes sbx-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 576px) {
    .sbx-toasts { top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .sbx-toast,
    .sbx-toast.is-leaving,
    .sbx-dialog,
    .sbx-dialog-backdrop { animation: none; }
}

/* pole "wpisz, aby potwierdzić" w okienku (np. nazwa usuwanej postaci) */
.sbx-dialog__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
}

.sbx-dialog__label {
    font-size: .82rem;
    color: #b7a98f;
}

.sbx-dialog__expected {
    color: var(--g-gold-hi, #f0d48a);
    font-weight: 700;
    user-select: all;
}

.sbx-dialog__input {
    width: 100%;
    min-height: 38px;
    padding: 7px 11px;
    font-size: .95rem;
    color: #efe4cc;
    background: var(--g-well, #22170c);
    border: 1px solid var(--g-gold-dim, #8a6a2a);
    border-radius: 6px;
    box-shadow: inset 0 0 8px rgba(0,0,0,.6);
    outline: none;
}

.sbx-dialog__input:focus {
    border-color: var(--g-gold-mid, #c9a14a);
    box-shadow: inset 0 0 8px rgba(0,0,0,.6), 0 0 0 2px rgba(201,161,74,.25);
}

.sbx-btn:disabled,
.sbx-btn:disabled:hover {
    opacity: .45;
    cursor: not-allowed;
    color: inherit;
    background: inherit;
}

.sbx-btn--danger:disabled,
.sbx-btn--danger:disabled:hover {
    color: #f5d0c6;
    background: #5a1f14;
    border-color: #8f3a2a;
}