/* ═══════════════════════════════════════════════════════════════
   Binga Global UI — Loading, Toast, Confirm, Progress
   Modern dark theme, Tailwind-compatible
   ═══════════════════════════════════════════════════════════════ */

/* ═══ TOP NAV PROGRESS BAR ═══ */
#bgProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2.5px;
  width: 0%;
  z-index: 9999;
  background: linear-gradient(90deg, #7c5cff 0%, #9d7cff 50%, #10b981 100%);
  box-shadow: 0 0 12px rgba(124,92,255,0.7);
  transition: width 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
#bgProgressBar.active { opacity: 1; }
#bgProgressBar.done {
  width: 100% !important;
  opacity: 0;
  transition: width 0.2s, opacity 0.4s 0.2s;
}

/* ═══ BUTTON LOADING STATE ═══ */
.bg-btn-loading {
  position: relative !important;
  pointer-events: none !important;
  color: transparent !important;
}
.bg-btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bgSpin 0.7s linear infinite;
}
.bg-btn-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: inherit;
  opacity: 0.85;
}
@keyframes bgSpin {
  to { transform: rotate(360deg); }
}

/* ═══ FULL-SCREEN LOADING OVERLAY ═══ */
#bgLoadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(7,7,13,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: bgFadeIn 0.2s ease;
}
#bgLoadingOverlay.active { display: flex; }
#bgLoadingOverlay .bg-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 36px;
  background: #0d0d15;
  border: 1px solid rgba(124,92,255,0.25);
  border-radius: 20px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.85);
  animation: bgScaleIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
#bgLoadingOverlay .bg-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(124,92,255,0.15);
  border-top-color: #7c5cff;
  border-right-color: #9d7cff;
  border-radius: 50%;
  animation: bgSpin 0.9s linear infinite;
}
#bgLoadingOverlay .bg-loader-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: -0.01em;
}
#bgLoadingOverlay .bg-loader-sub {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 2px;
}

@keyframes bgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bgScaleIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══ TOAST NOTIFICATIONS ═══ */
#bgToastContainer {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  width: calc(100vw - 32px);
  pointer-events: none;
}
.bg-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #0d0d15;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.7);
  pointer-events: auto;
  font-family: 'Inter', system-ui, sans-serif;
  animation: bgToastIn 0.35s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  overflow: hidden;
}
.bg-toast.bg-toast-hide {
  animation: bgToastOut 0.3s cubic-bezier(0.4,0,0.6,1) forwards;
}
.bg-toast::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: currentColor;
}
.bg-toast.bg-toast-success { color: #10b981; border-color: rgba(16,185,129,0.25); }
.bg-toast.bg-toast-error   { color: #ef4444; border-color: rgba(239,68,68,0.25); }
.bg-toast.bg-toast-warning { color: #f59e0b; border-color: rgba(245,158,11,0.25); }
.bg-toast.bg-toast-info    { color: #7c5cff; border-color: rgba(124,92,255,0.25); }

.bg-toast .bg-toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.bg-toast .bg-toast-body {
  flex: 1;
  min-width: 0;
}
.bg-toast .bg-toast-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 2px;
}
.bg-toast .bg-toast-msg {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.45;
}
.bg-toast .bg-toast-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.bg-toast .bg-toast-close:hover {
  background: rgba(255,255,255,0.06);
  color: #cbd5e1;
}

/* Progress bar inside toast */
.bg-toast .bg-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.6;
  animation: bgToastProgress linear forwards;
}
@keyframes bgToastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

@keyframes bgToastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes bgToastOut {
  to { opacity: 0; transform: translateX(24px) scale(0.96); }
}

/* ═══ CONFIRM DIALOG ═══ */
#bgConfirmModal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7,7,13,0.75);
  backdrop-filter: blur(6px);
  animation: bgFadeIn 0.2s ease;
}
#bgConfirmModal.active { display: flex; }
#bgConfirmModal .bg-confirm-card {
  width: 100%;
  max-width: 400px;
  background: #0d0d15;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 32px 80px -16px rgba(0,0,0,0.9);
  animation: bgScaleIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
#bgConfirmModal .bg-confirm-header {
  padding: 20px 22px 14px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
#bgConfirmModal .bg-confirm-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
#bgConfirmModal .bg-confirm-icon.warning { background: rgba(245,158,11,0.12); color: #f59e0b; }
#bgConfirmModal .bg-confirm-icon.danger  { background: rgba(239,68,68,0.12);  color: #ef4444; }
#bgConfirmModal .bg-confirm-icon.info    { background: rgba(124,92,255,0.12); color: #9d7cff; }
#bgConfirmModal .bg-confirm-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}
#bgConfirmModal .bg-confirm-msg {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}
#bgConfirmModal .bg-confirm-actions {
  padding: 0 22px 20px;
  display: flex;
  gap: 8px;
}
#bgConfirmModal .bg-confirm-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
#bgConfirmModal .bg-confirm-btn.cancel {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #cbd5e1;
}
#bgConfirmModal .bg-confirm-btn.cancel:hover {
  background: rgba(255,255,255,0.08);
}
#bgConfirmModal .bg-confirm-btn.confirm {
  background: #7c5cff;
  color: #fff;
}
#bgConfirmModal .bg-confirm-btn.confirm:hover {
  background: #9d7cff;
}
#bgConfirmModal .bg-confirm-btn.confirm.danger {
  background: #ef4444;
}
#bgConfirmModal .bg-confirm-btn.confirm.danger:hover {
  background: #f87171;
}

/* ═══ NETWORK OFFLINE INDICATOR ═══ */
#bgOfflineBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 16px;
  background: #ef4444;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  z-index: 9997;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
#bgOfflineBanner.active { transform: translateY(0); }

/* ═══ GLITCH / ERROR BOUNDARY ═══ */
#bgGlitchOverlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7,7,13,0.92);
  backdrop-filter: blur(8px);
  animation: bgFadeIn 0.3s ease;
}
#bgGlitchOverlay.active { display: flex; }
#bgGlitchOverlay .bg-glitch-card {
  width: 100%;
  max-width: 440px;
  padding: 28px;
  background: #0d0d15;
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: 20px;
  box-shadow: 0 32px 80px -16px rgba(0,0,0,0.9);
  text-align: center;
  animation: bgScaleIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
#bgGlitchOverlay .bg-glitch-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ef4444;
}
#bgGlitchOverlay .bg-glitch-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
}
#bgGlitchOverlay .bg-glitch-msg {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.55;
  margin: 0 0 18px;
  word-break: break-word;
}
#bgGlitchOverlay .bg-glitch-actions {
  display: flex;
  gap: 8px;
}
#bgGlitchOverlay .bg-glitch-btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
#bgGlitchOverlay .bg-glitch-btn.primary {
  background: #7c5cff;
  color: #fff;
}
#bgGlitchOverlay .bg-glitch-btn.primary:hover {
  background: #9d7cff;
}
#bgGlitchOverlay .bg-glitch-btn.secondary {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #cbd5e1;
}
#bgGlitchOverlay .bg-glitch-btn.secondary:hover {
  background: rgba(255,255,255,0.08);
}
#bgGlitchOverlay .bg-glitch-detail {
  margin-top: 14px;
  padding: 10px 12px;
  background: #07070d;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #64748b;
  text-align: left;
  max-height: 100px;
  overflow-y: auto;
  display: none;
  word-break: break-all;
}
#bgGlitchOverlay .bg-glitch-detail.show { display: block; }
#bgGlitchOverlay .bg-glitch-toggle {
  font-size: 10.5px;
  color: #64748b;
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  text-decoration: underline;
  text-decoration-color: rgba(100,116,139,0.4);
}

/* ═══ SKELETON SHIMMER ═══ */
.bg-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
  animation: bgShimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes bgShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  #bgToastContainer {
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
}