/**
 * Unified Toast Notification Styles — used by tradez-toasts.js.
 *
 * Three shapes (see tradez-toasts.js for the API):
 *   standard card — icon | title + message | action button
 *   payout card   — kicker (icon + small-caps label) / big amount / meta / gold link
 *   compact row   — icon · title · amount · meta · ×N  (frequent events)
 *
 * Colour rules: severity colours ONLY the icon/kicker and the amount; the
 * card surface, border, title and body stay neutral (v5 panel idiom).
 *
 * The container mounts on <body>, OUTSIDE the v5 `.app` scope, so the font,
 * box-sizing and palette are all (re)declared here. Palette values mirror
 * assets/css/v5.css — they can't be var()-inherited across the .app boundary
 * (only the :root-level --font-* tokens can).
 */

.tradez-toast-container {
    position: fixed;
    /* One anchor for everything: top-right, 12px below the 56px sticky
       topbar — never over the wallet chip or the bell. On screens wider than
       the shell's centered content (.app .main: max-width 1440px, 32px side
       padding), hug the content's right edge instead of drifting to the
       viewport edge. */
    top: 68px;
    right: max(16px, calc((100% - 1440px) / 2 + 32px));
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(340px, calc(100vw - 32px));
    pointer-events: none;
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;

    /* Light palette (default) — mirrors .app.theme-light in v5.css */
    --tz-panel: #faf7ef;
    --tz-panel-2: #ede7d7;
    --tz-rule: #c8bfa6;
    --tz-text: #1a1814;
    --tz-text-2: #3a3630;
    --tz-muted: #7a756a;
    --tz-accent: #b8680d;
    --tz-success: #2e5e3f;
    --tz-danger: #a8351a;
    --tz-warning: #8a5a0a;
    --tz-info: #2f5aa8;
    --tz-shadow: 0 6px 20px rgba(26, 24, 20, 0.14);
}
body:has(> .app.theme-dark) .tradez-toast-container {
    /* Dark palette — mirrors .app.theme-dark in v5.css */
    --tz-panel: #1c1f22;
    --tz-panel-2: #242830;
    --tz-rule: #3a3f46;
    --tz-text: #e6e1d2;
    --tz-text-2: #c2bdae;
    --tz-muted: #8a8579;
    --tz-accent: #d89b3a;
    --tz-success: #7cc598;
    --tz-danger: #e08b73;
    --tz-warning: #d89b3a;
    --tz-info: #89a8d4;
    --tz-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

.tradez-toast-container *,
.tradez-toast-container *::before,
.tradez-toast-container *::after {
    box-sizing: border-box;
}

/* Keyframes defined here (tz-prefixed) so the component is self-contained —
   the v5 shell doesn't load Legacy/components/animations.css. */
@keyframes tzToastIn {
    from { transform: translateX(110%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes tzToastOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(110%); opacity: 0; }
}

.tradez-toast {
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--tz-panel);
    color: var(--tz-text);
    border: 1px solid var(--tz-rule);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: var(--tz-shadow);
    animation: tzToastIn var(--transition-slow, 0.3s) ease-out;
}

.tradez-toast.removing {
    animation: tzToastOut var(--transition-slow, 0.3s) ease-out forwards;
}

/* Severity feeds --tz-sev; only icons, kickers and amounts read it. */
.tradez-toast-success { --tz-sev: var(--tz-success); }
.tradez-toast-danger  { --tz-sev: var(--tz-danger); }
.tradez-toast-warning { --tz-sev: var(--tz-warning); }
.tradez-toast-info    { --tz-sev: var(--tz-info); }

.tradez-toast-icon {
    margin: 1px 8px 0 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--tz-sev);
}
.tradez-toast-icon .tz-toast-svg { width: 16px; height: 16px; }

/* Body wraps title/message/amount/action, stacked vertically by default. */
.tradez-toast-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tradez-toast-title {
    display: block;
    font-weight: 700;
}

.tradez-toast-message {
    min-width: 0;
    color: var(--tz-text-2);
}
.tradez-toast-title + .tradez-toast-message { margin-top: 1px; }

.tradez-toast-meta {
    color: var(--tz-muted);
    font-size: 12.5px;
}

/* Action button (standard card). */
.tradez-toast-action {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    margin-top: 7px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    color: var(--tz-text);
    background: transparent;
    border: 1px solid var(--tz-rule);
    border-radius: 5px;
    cursor: pointer;
}
.tradez-toast-action::after {
    content: " →";
    white-space: pre;
}
.tradez-toast-action:hover {
    background: var(--tz-panel-2);
    color: var(--tz-text);
}

/* ── Payout card (options.amount) ─────────────────────────────────────────
   Rare, consequential money events. The amount is the headline; the kicker
   and amount carry the severity colour; the link is brand gold. */
.tradez-toast-payout {
    padding: 12px 14px;
}
.tradez-toast-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--tz-sev);
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.tradez-toast-kicker .tz-toast-svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.tradez-toast-amount {
    color: var(--tz-sev);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tradez-toast-payout .tradez-toast-amount {
    margin-top: 6px;
    font-size: 21px;
    line-height: 1.15;
}
.tradez-toast-payout .tradez-toast-meta { margin-top: 4px; }
.tradez-toast-payout .tradez-toast-action {
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--tz-accent);
    font-size: 12.5px;
}
.tradez-toast-payout .tradez-toast-action:hover {
    background: none;
    color: var(--tz-accent);
    text-decoration: underline;
}

/* ── Compact row (options.compact) ────────────────────────────────────────
   Frequent, low-stakes events: one line, coalesces into a ×N counter. */
.tradez-toast-compact {
    align-items: center;
    padding: 8px 10px 8px 12px;
}
.tradez-toast-compact .tradez-toast-icon { margin-top: 0; }
.tradez-toast-compact .tradez-toast-body {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    overflow: hidden;
}
.tradez-toast-compact .tradez-toast-title {
    font-weight: 600;
    white-space: nowrap;
}
.tradez-toast-compact .tradez-toast-amount { white-space: nowrap; }
.tradez-toast-compact .tradez-toast-meta {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.tradez-toast-count {
    flex-shrink: 0;
    align-self: center;
    background: var(--tz-panel-2);
    color: var(--tz-text-2);
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px 2px;
    border-radius: 999px;
}
.tradez-toast-compact .tradez-toast-action {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--tz-accent);
    font-size: 12px;
    white-space: nowrap;
}
.tradez-toast-compact .tradez-toast-action:hover {
    background: none;
    color: var(--tz-accent);
    text-decoration: underline;
}

.tradez-toast-close {
    background: none;
    border: none;
    padding: 0 0 0 10px;
    cursor: pointer;
    opacity: 0.55;
    font-size: 16px;
    line-height: 1;
    color: var(--tz-muted);
    flex-shrink: 0;
}
.tradez-toast-compact .tradez-toast-close { align-self: center; }
.tradez-toast-close:hover { opacity: 1; }

/* Progress bar (auto-dismiss timer) — card variants only. */
.tradez-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--tz-sev);
    opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
    .tradez-toast {
        animation: none !important;
    }
    .tradez-toast.removing {
        opacity: 0;
    }
}