#paintops-offline-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:99999;display:none;
  background:#b23b3b;color:#fff;font-size:14px;line-height:1.4;
  padding:10px 16px;text-align:center;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-shadow:0 -2px 8px rgba(0,0,0,.25);
}
#paintops-offline-banner.is-visible{display:block!important;}
#paintops-install-chip{
  position:fixed;right:14px;bottom:14px;z-index:99998;display:none;
  align-items:center;gap:10px;background:#2f5f7a;color:#fff;
  border:none;border-radius:24px;padding:10px 16px;font-size:14px;font-weight:600;
  box-shadow:0 3px 12px rgba(0,0,0,.28);cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
#paintops-install-chip.is-visible{display:inline-flex!important;}
#paintops-install-chip .pi-x{opacity:.75;font-weight:700;}
/* Phones only (restored 2026-07-22, the v1.0.106 fix was lost in a later
 * rewrite of this file): desktop Chrome/Edge already show their own
 * install icon in the address bar, a floating chip there is clutter. */
@media (min-width: 783px) {
  #paintops-install-chip, #paintops-install-chip.is-visible { display: none !important; }
}

/* NEITHER OF THESE BELONGS ON PAPER. Both are position:fixed app chrome, so
 * they land on top of whatever is being printed: the install chip turned up
 * in the corner of a Color Proposal sheet going out to a customer, and the
 * offline banner would do the same. Not scoped to any one screen on purpose,
 * because it is wrong on every document the app prints. The chip's own
 * is-visible rule is !important, so this has to be too. */
@media print {
  #paintops-install-chip,
  #paintops-install-chip.is-visible,
  #paintops-offline-banner,
  #paintops-offline-banner.is-visible { display: none !important; }
}