/* Floating React/Angular switch. Shared by both apps so it looks identical in each. */
.fw-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid #3b3b3b;
  border-radius: 999px;
  background: rgba(23, 23, 23, .92);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  color: #a1a1a1;
  font-family: Raleway, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color .2s ease, transform .2s ease;
}
.fw-toggle:hover { border-color: #006ca3; }
.fw-toggle:focus-visible { outline: 2px solid #4fb3e8; outline-offset: 3px; }
.fw-toggle:active { transform: scale(.97); }
.fw-toggle[aria-busy='true'] { cursor: progress; }

.fw-toggle__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: #006ca3;
  box-shadow: 0 2px 0 #004a70;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.fw-toggle[data-active='angular'] .fw-toggle__thumb { transform: translateX(100%); }

.fw-toggle__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 32px;
  transition: color .35s ease;
}
.fw-toggle__option.is-active { color: #fff; }
.fw-toggle__option svg { width: 18px; height: 18px; flex: none; }

.fw-toggle__status {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 4px 10px;
  border-radius: 4px;
  background: #171717;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.fw-toggle[data-state='offline'] { border-color: #6e6e6e; }
.fw-toggle[data-state='offline'] .fw-toggle__option:not(.is-active) { opacity: .45; }
.fw-toggle[data-state='error'] { border-color: #e57373; }
.fw-toggle[data-state='error'] .fw-toggle__status { background: #e57373; color: #171717; font-weight: 700; }
.fw-toggle:hover .fw-toggle__status,
.fw-toggle:focus-visible .fw-toggle__status,
.fw-toggle[aria-busy='true'] .fw-toggle__status,
.fw-toggle[data-state='error'] .fw-toggle__status { opacity: 1; transform: none; }

@media (max-width: 480px) {
  .fw-toggle { right: 12px; bottom: 12px; font-size: 11px; }
  .fw-toggle__option { width: 38px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-toggle, .fw-toggle__thumb, .fw-toggle__option { transition: none; }
}

/* Brief confirmation after a switch: the two versions look identical, so say which one is live. */
.fw-toast {
  position: fixed;
  right: 16px;
  bottom: 60px;
  z-index: 2000;
  padding: 10px 16px;
  border: 1px solid #006ca3;
  border-radius: 4px;
  background: rgba(23, 23, 23, .96);
  color: #fff;
  font-family: Raleway, sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  animation: fw-toast-in .3s ease both, fw-toast-out .4s ease 3.1s both;
}
.fw-toast strong { color: #4fb3e8; }

@keyframes fw-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fw-toast-out { to { opacity: 0; transform: translateY(8px); } }

@media (max-width: 480px) { .fw-toast { right: 12px; bottom: 52px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .fw-toast { animation: none; } }