/* "A new version is available — refresh" banner (static/boxes/version-check.js).
   Square corners, dark Syncstation-ish chrome; colours are literal so it looks
   right on both the site (style.css) and the standalone room (syncstation.css).
   Nothing renders unless version-check.js inserts .vc-banner. */
.vc-banner {
  position: fixed; left: 50%; bottom: 16px; z-index: 2147483600;
  transform: translateX(-50%) translateY(12px);
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 24px); padding: 10px 12px 10px 16px;
  background: linear-gradient(180deg, #2c2f37, #16181d);
  border: 1px solid #050608;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .07), inset -1px -1px 0 rgba(0, 0, 0, .6),
              0 0 0 1px rgba(106, 156, 255, .25), 0 4px 18px rgba(0, 0, 0, .5);
  color: #eef1f6; font: 14px/1.2 Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.vc-banner--in { opacity: 1; transform: translateX(-50%) translateY(0); }
.vc-msg { min-width: 0; }
.vc-refresh {
  flex-shrink: 0; cursor: pointer; padding: 6px 14px;
  font: bold 13px Tahoma, "Segoe UI", sans-serif; color: #eef1f6;
  background: linear-gradient(180deg, #3a5fa8, #24406f);
  border: 1px solid #050608;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(106, 156, 255, .3);
}
.vc-refresh:hover { filter: brightness(1.12); }
.vc-close {
  flex-shrink: 0; cursor: pointer; width: 26px; height: 26px; box-sizing: border-box;
  color: #c4cbd6; font: 12px Tahoma, sans-serif;
  background: linear-gradient(180deg, #34373f, #1c1e23);
  border: 1px solid #050608; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1);
}
.vc-close:hover { filter: brightness(1.15); }

@media (max-width: 480px) {
  .vc-banner { left: 12px; right: 12px; transform: translateY(12px); max-width: none; }
  .vc-banner--in { transform: translateY(0); }
}