/* Live account updates: the pop-ups, the notification list and the balance flash. Classes only: no inline styles anywhere. */

.afri-toasts {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 420px;
    z-index: 3000;
    pointer-events: none;
}

.afri-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    border-left: 5px solid #1e88e5;
    pointer-events: auto;
    cursor: pointer;
    animation: afri-toast-in 0.25s ease-out;
    transition: opacity 0.3s, transform 0.3s;
}

.afri-toast-alert {
    border-left-color: #e53935;
}

.afri-toast-out {
    opacity: 0;
    transform: translateY(-12px);
}

.afri-toast-icon {
    flex: 0 0 auto;
}

.afri-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.afri-toast-title {
    display: block;
    font-size: 14px;
    line-height: 1.2;
}

.afri-toast-text {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
}

.afri-toast-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: #6b7280;
    padding: 0 4px;
}

@keyframes afri-toast-in {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* the number on an account card blinks once when it changes */
.afri-balance-flash {
    animation: afri-flash 1.2s ease-out;
}

@keyframes afri-flash {
    0% { background-color: rgba(76, 175, 80, 0.55); border-radius: 6px; }
    100% { background-color: transparent; }
}

/* the notification list */
.afri-note-new {
    background-color: rgba(30, 136, 229, 0.08);
    border-radius: 10px;
    transition: background-color 1.2s;
}

.afri-note-main {
    min-width: 0;
}

.afri-note-message {
    overflow-wrap: anywhere;
}

.afri-empty {
    padding: 12px 0;
}

.afri-live-status {
    font-size: 12px;
}

.afri-live-live {
    color: #2e7d32;
}

.afri-live-reconnecting,
.afri-live-connecting {
    color: #ef6c00;
}

.afri-live-offline {
    color: #c62828;
}

/* the list inside the notification panel scrolls; the panel itself keeps its size */
.afri-notes-scroll {
    max-height: 190px;
    overflow-y: auto;
}