/* Pop-up messages on every page: alerts (showAlert / showSuccess / showError / showWarning / showInfo),
   confirmations (showConfirm / confirmSubmit / confirmClick), the flash-message dialog and toasts (showToast).
   Behaviour: js/tz_dialogs.js. Also .tz-modal, the same skin for a page's own Bootstrap confirm modals.
   Bump ?v= in layouts/base.html when this file changes (static files are cached a year). */

/* each tone's colour */
.tzd, .tzt, .tz-modal { --k: var(--tz-blue-400, #60a5fa); --k-rgb: 96, 165, 250; }
:is(.tzd, .tzt, .tz-modal, .tzd-item)[data-tone="success"] { --k: var(--tz-green-500); --k-rgb: var(--tz-green-500-rgb); }
:is(.tzd, .tzt, .tz-modal, .tzd-item):is([data-tone="error"], [data-tone="danger"]) { --k: #f87171; --k-rgb: 248, 113, 113; }
:is(.tzd, .tzt, .tz-modal, .tzd-item):is([data-tone="warning"], [data-tone="confirm"]) { --k: var(--tz-amber-500); --k-rgb: var(--tz-amber-500-rgb); }
:is(.tzd, .tzt, .tz-modal, .tzd-item)[data-tone="info"] { --k: #60a5fa; --k-rgb: 96, 165, 250; }

/* ---------- the dialog (native <dialog>, so it sits above the header, 3D stages and Bootstrap modals) ---------- */
dialog.tzd { position: fixed; inset: 0; margin: auto; width: min(27rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); padding: 0;
             border: 0; background: transparent; color: var(--tz-white); overflow: visible; font-family: var(--tz-font-body); }
dialog.tzd:not([open]) { display: none; }
dialog.tzd::backdrop { background: rgba(4, 7, 10, 0.68); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: tzd-fade .18s ease-out; }
dialog.tzd.is-closing::backdrop { animation: tzd-fade .14s ease-in reverse forwards; }

.tzd-box { position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); padding: 2.1rem 1.5rem 1.25rem; border-radius: 18px; text-align: center;
           background: radial-gradient(120% 70% at 50% 0%, rgba(var(--k-rgb), 0.16), transparent 60%), rgba(var(--tz-surface-900-rgb), 0.97);
           border: 1px solid rgba(var(--k-rgb), 0.32); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(var(--k-rgb), 0.1), inset 0 1px 0 rgba(var(--tz-white-rgb), 0.05);
           animation: tzd-in .26s cubic-bezier(.2, .9, .3, 1.2); }
.tzd-box::before { content: ''; position: absolute; left: 14%; right: 14%; top: -1px; height: 2px; border-radius: 2px; pointer-events: none;
                   background: linear-gradient(90deg, transparent, var(--k), transparent); box-shadow: 0 0 12px rgba(var(--k-rgb), 0.8); }
dialog.tzd.is-closing .tzd-box { animation: tzd-out .14s ease-in forwards; }

.tzd-x { position: absolute; top: 0.7rem; right: 0.7rem; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 9px;
         background: transparent; color: rgba(var(--tz-white-rgb), 0.45); font-size: 1rem; cursor: pointer; transition: color .15s, background .15s; }
.tzd-x:hover { color: var(--tz-white); background: rgba(var(--tz-white-rgb), 0.07); }
.tzd-x:focus-visible { outline: 2px solid var(--k); outline-offset: 1px; }

/* the round badge with the tone's icon */
.tzd-emblem { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 4.1rem; height: 4.1rem; margin: 0 auto 1rem; border-radius: 50%; font-size: 1.65rem; color: var(--k);
              background: radial-gradient(circle at 50% 35%, rgba(var(--k-rgb), 0.28), rgba(var(--k-rgb), 0.08) 70%); border: 1px solid rgba(var(--k-rgb), 0.5);
              box-shadow: 0 0 26px rgba(var(--k-rgb), 0.35), inset 0 0 14px rgba(var(--k-rgb), 0.2); animation: tzd-pop .42s .06s cubic-bezier(.2, .9, .3, 1.5) both; }
.tzd-emblem::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(var(--k-rgb), 0.45); animation: tzd-ring 1.1s .2s ease-out both; }

.tzd-title { margin: 0 0 0.45rem; font-family: var(--tz-font-ui); font-size: 1.45rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; color: var(--tz-white); }
.tzd-msg { min-height: 0; overflow-y: auto; margin: 0; font-size: 0.98rem; line-height: 1.6; color: rgba(var(--tz-white-rgb), 0.78); overflow-wrap: anywhere; }
.tzd-msg.is-text { white-space: pre-line; }
.tzd-msg strong, .tzd-msg b { color: var(--tz-white); }
.tzd-msg a { color: var(--k); }

/* several flash messages at once */
.tzd-list { min-height: 0; overflow-y: auto; margin: 0.35rem 0 0; padding: 0; list-style: none; text-align: left; }
.tzd-item { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: rgba(var(--k-rgb), 0.07); border: 1px solid rgba(var(--k-rgb), 0.2);
            font-size: 0.95rem; line-height: 1.5; color: rgba(var(--tz-white-rgb), 0.85); overflow-wrap: anywhere; }
.tzd-item + .tzd-item { margin-top: 0.5rem; }
.tzd-item > i { margin-top: 0.2rem; color: var(--k); }
.tzd-item > p { margin: 0; }

.tzd-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.4rem; }
.tzd-btn { flex: 1 1 8rem; max-width: 13rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.9rem; padding: 0.55rem 1.2rem;
           border-radius: 11px; border: 1px solid transparent; cursor: pointer; font-family: var(--tz-font-ui); font-size: 1.02rem; font-weight: 700; letter-spacing: 0.06em;
           text-transform: uppercase; transition: transform .12s, box-shadow .15s, background .15s, border-color .15s, color .15s; }
.tzd-btn:active { transform: translateY(1px) scale(0.98); }
.tzd-btn:focus-visible { outline: 2px solid var(--tz-white); outline-offset: 2px; }
.tzd-primary { color: #071009; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 55%), var(--k); border-color: rgba(var(--tz-white-rgb), 0.15);
               box-shadow: 0 6px 18px rgba(var(--k-rgb), 0.35); }
.tzd-primary:hover { box-shadow: 0 8px 26px rgba(var(--k-rgb), 0.55); }
.tzd-ghost { color: rgba(var(--tz-white-rgb), 0.8); background: rgba(var(--tz-white-rgb), 0.04); border-color: rgba(var(--tz-white-rgb), 0.16); }
.tzd-ghost:hover { color: var(--tz-white); background: rgba(var(--tz-white-rgb), 0.09); border-color: rgba(var(--tz-white-rgb), 0.28); }
/* a confirmation's go button takes the action's colour, not the question's amber */
.tzd-go-success { --k: var(--tz-green-500); --k-rgb: var(--tz-green-500-rgb); }
.tzd-go-danger  { --k: #f87171; --k-rgb: 248, 113, 113; }
/* red buttons: deep red with white text (the light red is for icons and glows) */
.tzd[data-tone="error"] .tzd-primary, .tzd-primary.tzd-go-danger { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 55%), #dc2626; box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4); }
/* the site's own button focus style (green border + glow) must not leak in; keyboard focus gets a white ring */
.tzd .tzd-btn:focus, .tz-modal .modal-footer .btn:focus { outline: none; border-color: rgba(var(--tz-white-rgb), 0.15); }
.tzd .tzd-ghost:focus { border-color: rgba(var(--tz-white-rgb), 0.16); }
/* base.html's keyboard ring is !important and in the page's domain colour: white here, and keep the button's corners */
.tzd .tzd-btn:focus-visible, .tz-modal .modal-footer .btn:focus-visible { outline: 2px solid rgba(var(--tz-white-rgb), 0.85) !important; outline-offset: 2px !important; border-radius: 11px; }
.tzd .tzd-x:focus-visible { border-radius: 9px; }

@keyframes tzd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tzd-in   { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes tzd-out  { to { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes tzd-pop  { from { opacity: 0; transform: scale(0.4) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes tzd-ring { from { opacity: 0.9; transform: scale(0.85); } to { opacity: 0; transform: scale(1.45); } }

@media (max-width: 480px) {
    .tzd-box { padding: 1.8rem 1.1rem 1rem; }
    .tzd-title { font-size: 1.3rem; }
    .tzd-actions { flex-direction: column-reverse; }
    .tzd-btn { max-width: none; flex-basis: auto; }
}

/* ---------- toasts (bottom right; bottom centre on phones) ---------- */
.tzt-stack { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 10050; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem;
             width: min(23rem, calc(100vw - 2rem)); pointer-events: none; font-family: var(--tz-font-body); }
.tzt { position: relative; display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 0.8rem 0.6rem 0.8rem 0.9rem; overflow: hidden; border-radius: 14px; pointer-events: auto;
       color: var(--tz-white); background: linear-gradient(100deg, rgba(var(--k-rgb), 0.16), transparent 55%), rgba(var(--tz-surface-900-rgb), 0.96);
       border: 1px solid rgba(var(--k-rgb), 0.35); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 22px rgba(var(--k-rgb), 0.12);
       backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: tzt-in .3s cubic-bezier(.2, .9, .3, 1.15); }
.tzt.is-leaving { animation: tzt-out .25s ease-in forwards; }
.tzt-icon { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0.95rem; color: var(--k);
            background: rgba(var(--k-rgb), 0.15); border: 1px solid rgba(var(--k-rgb), 0.4); }
.tzt-text { flex: 1; min-width: 0; align-self: center; margin: 0; font-size: 0.92rem; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.tzt-x { flex-shrink: 0; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: 7px; background: transparent;
         color: rgba(var(--tz-white-rgb), 0.45); cursor: pointer; }
.tzt-x:hover { color: var(--tz-white); background: rgba(var(--tz-white-rgb), 0.08); }
/* time left before it goes */
.tzt-life { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--k); box-shadow: 0 0 8px rgba(var(--k-rgb), 0.8); transform-origin: left;
            animation: tzt-life var(--tzt-ms, 4000ms) linear forwards; }
.tzt:hover .tzt-life { animation-play-state: paused; }

@keyframes tzt-in   { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: none; } }
@keyframes tzt-out  { to { opacity: 0; transform: translateX(60%); } }
@keyframes tzt-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 575.98px) {
    .tzt-stack { right: 50%; transform: translateX(50%); bottom: 1rem; align-items: stretch; }
    @keyframes tzt-in { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: none; } }
}

/* ---------- .tz-modal: the same look for a page's own Bootstrap confirm modal (put it on .modal-content) ---------- */
.modal-content.tz-modal { position: relative; overflow: hidden; border-radius: 18px; color: var(--tz-white); font-family: var(--tz-font-body);
                          background: radial-gradient(120% 60% at 50% 0%, rgba(var(--k-rgb), 0.13), transparent 60%), rgba(var(--tz-surface-900-rgb), 0.98);
                          border: 1px solid rgba(var(--k-rgb), 0.32) !important; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(var(--k-rgb), 0.08); }
.modal-content.tz-modal::before { content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 2px; border-radius: 2px; pointer-events: none;
                                  background: linear-gradient(90deg, transparent, var(--k), transparent); box-shadow: 0 0 12px rgba(var(--k-rgb), 0.8); }
.tz-modal .modal-header { padding: 1.2rem 1.35rem 0.6rem; border: 0 !important; background: transparent !important; }
.tz-modal .modal-title { display: flex; align-items: center; gap: 0.15rem; font-family: var(--tz-font-ui); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; color: var(--tz-white) !important; }
.tz-modal .modal-title > i:first-child { color: var(--k) !important; }
.tz-modal .btn-close { filter: invert(1) grayscale(1) brightness(1.4); opacity: 0.5; }
.tz-modal .btn-close:hover { opacity: 0.9; }
.tz-modal .modal-body { padding: 0.5rem 1.35rem 0.75rem; color: rgba(var(--tz-white-rgb), 0.8); background: transparent !important; }
/* Bootstrap's modal-sm is too narrow for two buttons side by side */
.modal-dialog:has(> .tz-modal) { --bs-modal-width: 27rem; }
.tz-modal .modal-body > :last-child, .tz-modal .modal-body > :last-child > :last-child { margin-bottom: 0; }
/* buttons: equal halves on one row, Cancel on the left whatever the markup order */
.tz-modal .modal-footer { display: flex; flex-wrap: nowrap; gap: 0.6rem; padding: 0.9rem 1.35rem 1.3rem; border: 0 !important; background: transparent !important; }
.tz-modal .modal-footer > * { flex: 1 1 0; min-width: 0; margin: 0; }
.tz-modal .modal-footer > form { display: flex !important; }
.tz-modal .modal-footer [data-bs-dismiss="modal"] { order: -1; }
.tz-modal .modal-footer .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; min-height: 2.9rem; padding: 0.45rem 0.8rem;
                               border-radius: 11px; font-family: var(--tz-font-ui); font-size: 0.98rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.15; text-transform: uppercase; }
.tz-modal .modal-footer .btn > i { margin: 0 !important; }
.tz-modal .modal-footer .btn-success { color: #071009; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 55%), var(--tz-green-500); border: 1px solid rgba(var(--tz-white-rgb), 0.15); box-shadow: 0 6px 18px rgba(var(--tz-green-500-rgb), 0.35); }
.tz-modal .modal-footer .btn-warning { color: #1a1204; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 55%), var(--tz-amber-500); border: 1px solid rgba(var(--tz-white-rgb), 0.15); box-shadow: 0 6px 18px rgba(var(--tz-amber-500-rgb), 0.35); }
.tz-modal .modal-footer .btn-danger { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 55%), #dc2626; border: 1px solid rgba(var(--tz-white-rgb), 0.15); box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35); }
@media (max-width: 400px) {
    .tz-modal .modal-footer { flex-direction: column-reverse; }
    .tz-modal .modal-footer [data-bs-dismiss="modal"] { order: 0; }
}

/* ---------- a trade receipt inside a .tz-modal (marketplace buy / sell) ---------- */
.tzr-swap { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.9rem; border-radius: 14px; background: rgba(var(--k-rgb), 0.07); border: 1px solid rgba(var(--k-rgb), 0.16); }
.tzr-side { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 4.5rem; }
.tzr-side img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
.tzr-side > i { font-size: 1.9rem; line-height: 40px; color: var(--tz-green-500); }
.tzr-side span { font-size: 0.75rem; font-weight: 600; color: rgba(var(--tz-white-rgb), 0.6); text-align: center; }
.tzr-arrow { color: rgba(var(--k-rgb), 0.7); font-size: 1.05rem; }
.tzr-lines { margin: 0.9rem 0 0; padding: 0; list-style: none; }
.tzr-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0.15rem; font-size: 0.92rem; color: rgba(var(--tz-white-rgb), 0.72); font-variant-numeric: tabular-nums; }
.tzr-lines li strong { color: var(--tz-white); font-weight: 600; }
.tzr-lines li.is-minus strong { color: #f87171; }
.tzr-note { margin: 0.75rem 0 0.1rem; font-size: 0.8rem; color: var(--tz-amber-400, #fbbf24); }
.tzr-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; padding: 0.75rem 0.9rem; border-radius: 12px;
             background: rgba(var(--tz-green-500-rgb), 0.1); border: 1px solid rgba(var(--tz-green-500-rgb), 0.28); }
.tzr-total span { font-family: var(--tz-font-ui); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--tz-white-rgb), 0.65); }
.tzr-total strong { font-family: var(--tz-font-display); font-size: 1.3rem; font-weight: 700; color: var(--tz-green-400, #4ade80); font-variant-numeric: tabular-nums; }
.tz-modal .modal-footer .btn-secondary, .tz-modal .modal-footer .btn-outline-secondary { color: rgba(var(--tz-white-rgb), 0.8); background: rgba(var(--tz-white-rgb), 0.04); border: 1px solid rgba(var(--tz-white-rgb), 0.16); }
.tz-modal .modal-footer .btn-secondary:hover, .tz-modal .modal-footer .btn-outline-secondary:hover { color: var(--tz-white); background: rgba(var(--tz-white-rgb), 0.09); }

@media (prefers-reduced-motion: reduce) {
    .tzd-box, .tzd-emblem, .tzd-emblem::after, dialog.tzd::backdrop, .tzt, .tzt.is-leaving { animation: none !important; }
    .tzd-emblem::after { display: none; }
}