/* 24-hour listener chips (bottom-left) and toasts */
.bl-bar { position: fixed; left: 14px; bottom: 14px; z-index: 8500; display: flex; flex-direction: column; gap: 6px; font: 12px/1.3 ui-monospace, "JetBrains Mono", Menlo, monospace; }
.bl-bar[hidden] { display: none; }
.bl-chip { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 999px; background: rgba(13,23,18,.92); border: 1px solid rgba(139,255,190,.25); color: #E7ECE9; cursor: pointer; backdrop-filter: blur(3px); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.bl-chip i { width: 7px; height: 7px; border-radius: 50%; background: #8FA69C; flex: none; }
.bl-chip.live i { background: #2BFF7A; box-shadow: 0 0 8px #2BFF7A; animation: blPulse 2.4s infinite; }
@keyframes blPulse { 70% { box-shadow: 0 0 0 7px rgba(43,255,122,0); } 100% { box-shadow: 0 0 0 0 rgba(43,255,122,0); } }
.bl-chip b { font-weight: 700; } .bl-chip span { color: #8FA69C; }
.bl-chip button { all: unset; cursor: pointer; color: #8FA69C; padding: 0 4px; font-weight: 700; } .bl-chip button:hover { color: #FF5C5C; }
.bl-toasts { position: fixed; left: 14px; bottom: 14px; z-index: 8600; display: flex; flex-direction: column-reverse; gap: 6px; pointer-events: none; transform: translateY(-100%); margin-bottom: 8px; }
.bl-toast { opacity: 0; transform: translateX(-12px); transition: opacity .3s, transform .3s; max-width: 340px; padding: 8px 12px; border-radius: 10px; background: rgba(6,10,8,.95); border: 1px solid rgba(43,255,122,.45); color: #E7ECE9; font: 12.5px/1.4 ui-monospace, "JetBrains Mono", Menlo, monospace; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.bl-toast.show { opacity: 1; transform: none; }
.bl-toast b { display: block; color: #2BFF7A; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.bl-toast.token b { color: #3DA9FF; } .bl-toast.bad { border-color: rgba(255,92,92,.6); } .bl-toast.bad b { color: #FF5C5C; } .bl-toast.ok b { color: #2BFF7A; }
.bl-bar:has(.bl-chip) ~ .bl-toasts, .bl-toasts { }
@media (max-width: 640px) { .bl-bar { left: 8px; bottom: 8px; } .bl-chip span { display: none; } .bl-toast { max-width: 80vw; } }

.bl-chip .bl-keep { all: unset; cursor: pointer; font-weight: 700; font-size: 11px; color: #061008; background: #2BFF7A; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.bl-chip .bl-keep:disabled { opacity: .5; }
@media (max-width: 640px) { .bl-chip .bl-keep { font-size: 10px; } }