/* Transactions modal — flat Stage-themed design, matched to the chat-history /
   notifications modals. Surface #141417 (same as the leaderboard modal). Each row
   is a floating card; green = incoming, red = outgoing; flat line icons by action
   type. Modal width/height (max-width 700 / max-height calc(80vh-80px)) UNCHANGED. */

@keyframes txSpin { to { transform: rotate(360deg); } }
@keyframes txRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* scrollbar hiding */
.transactions-modal-content { scrollbar-width: none; -ms-overflow-style: none; }
.transactions-modal-content::-webkit-scrollbar { display: none; }
#transactionsContent { scrollbar-width: none; -ms-overflow-style: none; }
#transactionsContent::-webkit-scrollbar { display: none; }

/* ── list = floating cards (JS appends .transaction-item into #transactionsList) ── */
#transactionsList { display: flex; flex-direction: column; gap: 8px; }
.transaction-item {
    display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.04);
    transition: transform .16s, border-color .16s, background .16s; animation: txRise .4s ease both;
}
.transaction-item:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.07); }

/* icon tile — flat line icon; colour = direction (green in / red out) */
.transaction-icon { width: 44px; height: 44px; border-radius: 50% !important; flex-shrink: 0; display: grid; place-items: center; }
.transaction-icon svg { width: 20px; height: 20px; }
.transaction-icon.positive { background: rgba(54,211,153,0.12); border: 1px solid rgba(54,211,153,0.22); color: #36d399; }
.transaction-icon.negative { background: rgba(255,84,112,0.12); border: 1px solid rgba(255,84,112,0.22); color: #ff7a90; }

/* info */
.transaction-info { flex: 1; min-width: 0; }
.transaction-action { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; margin: 0; }
.transaction-reason { font-size: 12px; color: rgba(255,255,255,0.4); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transaction-balance { font-size: 10.5px; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); padding: 2px 7px; border-radius: 6px; display: inline-block; margin-top: 5px; }
.transaction-balance .lt { color: #ffc83d; }

/* amount + date */
.transaction-amount-wrapper { text-align: right; flex-shrink: 0; }
.transaction-amount { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 0; }
.transaction-amount.positive { color: #36d399; }
.transaction-amount.negative { color: #ff5470; }
.transaction-date { font-size: 11px; color: rgba(255,255,255,0.35); margin: 3px 0 0; }

/* ── empty state (flat 66px icon; wrapper #transactionsEmpty toggled block by JS) ── */
.tx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 54px 24px 46px; gap: 16px; animation: txRise .4s ease both; }
.tx-empty-ic { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); }
.tx-empty-ic svg { width: 30px; height: 30px; }
.tx-empty-msg { font-size: 15.5px; font-weight: 700; color: rgba(255,255,255,0.72); }
.tx-empty-sub { font-size: 12.5px; color: rgba(255,255,255,0.4); max-width: 250px; line-height: 1.45; }

/* end-of-history line */
.tx-end { text-align: center; color: rgba(255,255,255,0.3); font-size: 12px; }

/* ── Mobile fullscreen (PRESERVED — width/height unchanged) ── */
@media (max-width: 900px) {
    #meetgleTransactionsModal { padding: 0 !important; }
    #meetgleTransactionsModal > .transactions-modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100svh !important;
        max-height: 100vh !important;
        max-height: 100svh !important;
        border-radius: 0 !important;
    }
    #transactionsContent { max-height: calc(100svh - 80px) !important; }
}